/* ══════════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════════ */
:root {
  --gold-light:  #f5c060;
  --gold-main:   #f0a040;
  --gold-deep:   #d4845a;
  --amber:       #e8821a;
  --navy:        #1e3050;
  --navy-mid:    #2a4a6a;
  --navy-light:  #4a6080;
  --cream:       #FDFBF7;     /* ivoire chaud — fond général light */
  --cream-dark:  #E8E4DC;    /* séparateurs/bordures warm */
  --white:       #ffffff;
  --dark-bg:     #0f0e0c;
  /* Surface sombre du modal Livre — son seul usage. Etait #1a1508, un brun
     olive hérité qui jurait avec la palette navy de l'app. Aligné sur la
     couleur des autres surfaces sombres. */
  --dark-card:   #1C2537;
  --purple:      #7b5ea7;
  --red:         #e8776a;
  --green:       #50b896;
  --blue:        #4a90d9;
  /* Échelle de difficulté du Quiz — la couleur dit l'effort demandé, du vert
     au rouge. Assombries par rapport à --green / --amber de la palette : les
     tuiles portent une icône BLANCHE, et #50b896 comme #e8821a la laissaient
     sous 3:1. Ces tons tiennent le seuil (3,28:1 / 3,45:1 / 4,87:1), là où le
     doré qu'ils remplacent plafonnait à 2,14:1. */
  --q-facile:         #3f9e7d;
  --q-facile-deep:    #2e7d62;
  --q-moyen:          #d17110;
  --q-moyen-deep:     #a85a0c;
  --q-difficile:      #c14a3c;
  --q-difficile-deep: #a03a2e;
  --card-bg:          #ffffff;
  --card-border:      #e8ecf2;
  --section-label:    #1e3050;   /* texte des accordéons (clair) */
  --section-arrow:    #4a6080;   /* flèche accordéon */
  --section-body-txt: #4a6080;   /* corps accordéon */
  --section-body-str: #1e3050;   /* gras dans le corps */

  /* ── Unités de viewport compensées du zoom de l'application ──
     Le réglage « Taille du texte » applique `zoom` sur <html> (setAppZoom).
     `zoom` agrandit les px, mais laisse vh/vw/dvh exprimés dans l'écran NON
     zoomé : à 160 %, un `max-height: 100dvh` valait 1,6 écran. La modale de
     don, par exemple, dépassait alors en haut ET en bas sans que son
     overflow:auto se déclenche — ses boutons devenaient inatteignables.
     --app-zoom est posée par setAppZoom() ; utiliser calc(N * var(--vh))
     partout où on aurait écrit Nvh. */
  --app-zoom: 1;
  --vh: calc(1dvh / var(--app-zoom));
  --vw: calc(1vw / var(--app-zoom));
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* ══════════════════════════════════════════
   MOBILE FIRST — Plein écran
══════════════════════════════════════════ */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  overflow: hidden;
  overscroll-behavior: none;
}

/* ══ CADRE TÉLÉPHONE — base (desktop) ══ */
.phone-frame {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* ══ TÉLÉPHONE — plein écran, ancré au viewport ══
   position:fixed + inset:0 empêche tout déplacement lié
   à la barre URL Safari (apparition/disparition).
   overflow:hidden bloque le scroll horizontal parasite.

   La condition de hauteur : un Android en paysage mesure 740x360. La largeur
   passait au-dessus de 600 px et il basculait sur la maquette « tablette »
   ci-dessous — un cadre de 390x317 posé sur un fond sombre, page non
   défilante : la moitié de l'écran devenait inatteignable. Un vrai téléphone
   reste donc en plein écran quelle que soit son orientation. */
@media (max-width: 599px), (max-height: 699px) {
  html {
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    overflow: hidden;
    overscroll-behavior: none;
    width: 100%;
    height: 100%;
  }
  .phone-frame {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    /* Pas de max-width: 100vw — inset:0 fixe déjà la largeur, et sous `zoom`
       100vw se lit dans l'écran non zoomé : le cadre y prenait 1,6 écran de
       large (ou se rétrécissait sous 100 %, cf. commit 2472a8d). */
  }

}

/* ══ Barre de statut unifiée : salutation (gauche) + logo+date (droite) ══ */
.status-bar {
  display: flex;
  /* min-height plutôt que height : Android applique le réglage système de
     taille de police au texte de la page (Chrome font boosting), ce que iOS
     ne fait pas. À 170 % la date passait sous les 48 px figés et
     l'overflow:hidden ci-dessous la coupait net. */
  min-height: 48px;
  align-items: center;
  justify-content: space-between; /* greeting gauche / logo+date droite */
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  /* Safe-area mobile : descend sous l'encoche/Dynamic Island */
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  z-index: 100;
  overflow: hidden;
  /* Barre décorative : ne bloque pas les clics des boutons sous-jacents */
  pointer-events: none;
}
/* Sections d'en-tête : padding-top augmenté de la safe-area pour rien ne soit tronqué */
.home-hero {
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 14px));
}
.plus-header,
.profil-hero {
  padding-top: calc(env(safe-area-inset-top, 0px) + 52px);
}
/* safe-area déjà intégrée dans le padding de chaque header — pas de surcharge ici */
/* Heure masquée partout — l'OS la gère sur mobile */
.status-time { display: none; }

/* ── Greeting — masqué sur toutes les pages ── */
.atb-greet { display: none !important; }

/* ── Groupe droite : date + logo ── */
.atb-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.atb-date {
  display: none;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.status-bar.dark  .atb-date { color: rgba(255,255,255,0.55); }
.status-bar.gold  .atb-date { color: rgba(255,255,255,0.55); }
.status-bar.light .atb-date { color: var(--navy-light); }
#screen-home .status-bar .atb-date { color: rgba(30,48,80,0.5); }

/* ── Bouton < de fermeture — enfants de Plus ── */
.screen-close-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px); /* au-dessus du titre */
  left: 16px;
  right: auto;
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.9);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 110; /* au-dessus de la status-bar (z-index:100) */
  transition: background 0.15s, transform 0.15s;
}
.screen-close-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.93); }
/* Fond clair (Messages, Questions, Bibliothèque) */
.screen-close-btn.on-light {
  background: rgba(30,48,80,0.1);
  color: var(--navy-mid);
}
.screen-close-btn.on-light:active { background: rgba(30,48,80,0.2); }

/* ── Toast de notification ── */
#toast-container {
  position: absolute;
  bottom: 80px; /* au-dessus de la bottom-nav */
  left: 16px;
  right: 16px;
  z-index: 9000;
  pointer-events: none;
}
.toast-notif {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.toast-notif.toast-visible { opacity: 1; transform: translateY(0); }
.toast-success { background: linear-gradient(135deg, #50b896, #3a9a7a); color: white; }
.toast-error   { background: linear-gradient(135deg, var(--red), #c05050); color: white; }
.toast-info    { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); color: var(--gold-light); }

/* ══════════════════════════════════════════
   TABLETTE (≥ 600px de large ET ≥ 700px de haut) — Maquette téléphone centrée
   La hauteur exigée écarte les téléphones en paysage : voir le bloc
   « TÉLÉPHONE » plus haut.
   Cadre à taille mobile posé sur le fond de page,
   coins arrondis + ombre portée douce (pas de liseré :
   un liseré coloré apparaissait comme deux traits gris
   sur les côtés quand sa teinte différait du fond).
══════════════════════════════════════════ */
@media (min-width: 600px) and (min-height: 700px) {
  body {
    background: radial-gradient(125% 90% at 50% 12%, #251c40 0%, #0b0914 58%);
    display: flex;
    justify-content: center;
    /* flex-start + margin:auto sur le cadre : centré tant que ça tient, et le
       haut reste atteignable quand ça déborde (align-items:center rend la
       partie haute d'un enfant trop grand impossible à faire défiler). */
    align-items: flex-start;
    min-height: calc(100 * var(--vh));
    overflow: auto;
  }
  .phone-frame {
    margin: auto;
    width: 390px;
    max-width: 390px;
    height: min(calc(88 * var(--vh)), 820px);
    border-radius: 46px;
    overflow: clip;
    /* Maquette téléphone : bezel sombre (corps) + ombre portée.
       Pas de reflet clair sur le contour → évite les « traits »
       lumineux isolés sur les côtés. */
    box-shadow:
      0 0 0 10px #0d1220,
      0 30px 70px rgba(0,0,0,0.55),
      0 8px 22px rgba(0,0,0,0.45);
  }
  .status-bar  { padding: 0 20px; }
}

/* ══════════════════════════════════════════
   DESKTOP (≥ 1024px) — Frame plus grande
══════════════════════════════════════════ */
@media (min-width: 1024px) and (min-height: 700px) {
  .phone-frame {
    width: 430px;
    max-width: 430px;
    height: min(calc(90 * var(--vh)), 880px);
    box-shadow:
      0 0 0 12px #0d1220,
      0 40px 90px rgba(0,0,0,0.6),
      0 10px 28px rgba(0,0,0,0.5);
  }
  /* Légère mise à l'échelle des textes sur grand écran */
  .msg-text       { font-size: 14px; }
  .msg-title      { font-size: 22px; }
  .msg-body       { font-size: 14px; }
  .timeline-ctext { font-size: 12px; }
  .temo-card-text { font-size: 13px; }
  .vi-title-sm    { font-size: 13px; }
  .mod-label      { font-size: 10px; }
  .nav-label      { font-size: 10px; }
}

/* ── Barre de statut — couleurs (display géré par les media queries) ── */
.status-bar.dark  { color: var(--navy); }
.status-bar.light { color: white; }
.status-bar.gold  { color: var(--gold-light); }

/* Logo et groupe droite — masqués sur toutes les pages */
.status-logo,
.bible-logo-sm,
.atb-right { display: none !important; }

/* ── Écrans (screens) ── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}
.screen.active { display: flex; }

/* ══ BARRE DE NAV BAS — redesign mobile natif ══ */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 6px 4px max(10px, env(safe-area-inset-bottom, 10px));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: none;
  flex-shrink: 0;
  gap: 0;
}
.bottom-nav.dark {
  background: rgba(14,24,37,0.97);
  border-top: none;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 2px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: #94a3b8;
  transition: color 0.2s, transform 0.15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn i {
  font-size: 22px;
  line-height: 1;
  display: block;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.nav-label {
  display: none; /* icônes seules — sans texte */
}
/* Bouton central Plus — uniforme (pas de pill dorée) */
.nav-btn-center {
  position: relative;
}
.nav-center-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto; height: auto;   /* était 32×32 → décalait l'icône Plus vers le haut */
  background: none;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  transition: transform 0.2s;
}
.nav-center-pill i { line-height: 1; display: block; }
.nav-btn-center .nav-center-pill i {
  font-size: 22px;
  color: inherit;
}
.nav-btn.active          { color: var(--navy); }
.nav-btn.active-gold     { color: var(--gold-light); }
.nav-btn.active i        { transform: scale(1.15); }
.nav-btn.active .nav-center-pill { transform: none; box-shadow: none; }
/* Indicateur top supprimé — icône active colorée suffit */
.nav-btn.active::before,
.nav-btn.active-gold::before { display: none; }
/* Suppression de l'ancien nav-dot */
.nav-dot { display: none; }

/* ══════════════════════════════
   ÉCRAN 0 — SPLASH
══════════════════════════════ */
#screen-splash {
  background: var(--cream);
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.splash-logo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 34px rgba(30,48,80,0.18);
  animation: fadeUp 1s ease both;
}
.splash-tagline { color: var(--navy-light); font-size: 14px; font-style: italic; animation: fadeUp 1.2s ease both; }
.splash-btn {
  margin-top: 32px;
  background: var(--navy);
  color: var(--gold-light);
  border: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  animation: fadeUp 1.4s ease both;
  letter-spacing: 0.5px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 8px 24px rgba(30,48,80,0.3);
}
.splash-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(30,48,80,0.4); }
/* Mode clair → bouton gold clair + texte noir */
[data-theme="light"] .splash-btn {
  background: linear-gradient(135deg, #FFE5A0 0%, #F5C060 100%);
  color: #0F2547;
  box-shadow: 0 8px 24px rgba(240,160,64,0.30);
}
[data-theme="light"] .splash-btn:hover { box-shadow: 0 12px 32px rgba(240,160,64,0.40); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════
   ÉCRAN 1 — ACCUEIL
══════════════════════════════ */
#screen-home { background: var(--cream); }
/* Date masquée sur l'accueil */
#home-date { display: none; }
.home-hero {
  min-height: 160px;
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 24px 22px;
  position: relative;
  flex-shrink: 0;
  gap: 6px;
  /* Fondu doux vers le corps de la page */
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.home-glow {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 240px; height: 200px;
  background: radial-gradient(ellipse, rgba(245,192,96,0.30) 0%, transparent 65%);
}
.home-logo {
  position: relative; z-index: 1;
  width: 96px;
  height: 96px;
  display: block;
  /* logo.png est désormais un badge rond autonome (cercle + anneau doré +
     ombre) : on n'ajoute PAS de cadre CSS pour éviter le double anneau. */
  object-fit: contain;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.home-date {
  position: relative; z-index: 1;
  background: var(--navy);
  border: 1.5px solid rgba(245,192,96,0.6);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.5px;
}
.home-logo-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.home-welcome-msg {
  position: relative; z-index: 2;
  color: rgba(255,255,255,0.96);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.25px;
  font-style: italic;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  max-width: 340px;
  padding: 6px 0 2px;
}
.home-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 24px; }
.section-title {
  font-size: 11px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 12px; padding-top: 4px;
}
.msg-card-big {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}
.msg-card-big:hover { transform: scale(0.98); }
.msg-card-big::before {
  content: '"'; position: absolute; top: -16px; right: 12px;
  font-size: 80px; opacity: 0.08; font-family: Georgia, serif; color: var(--gold-light);
}
.msg-card-big::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(245,192,96,0.12) 0%, transparent 60%);
}
/* « Message du jour » → exactement comme « Plan de lecture » (rp-home-title) */
.msg-card-label {
  font-size: 12px; font-weight: 800; color: var(--gold-light);
  text-transform: none; letter-spacing: 0;
  margin-bottom: 10px; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
}
.msg-card-label-icon { color: var(--gold-light); font-size: 14px; }
.msg-tag  { font-size: 9px; font-weight: 700; color: var(--gold-light); letter-spacing: 1.5px; margin-bottom: 6px; position: relative; z-index: 1; }
.msg-text { font-size: 13px; color: white; line-height: 1.5; font-weight: 500; position: relative; z-index: 1; }
.msg-ref  { font-size: 10px; color: rgba(245,192,96,0.7); margin-top: 8px; font-style: italic; position: relative; z-index: 1; }
/* ── Bloc CTA Prière — comble le vide flex:1 de home-body ── */
.home-faith-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px;
  padding: 14px 16px;
  margin-top: 0;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.home-faith-cta:active { transform: scale(0.98); opacity: 0.85; }
.home-faith-emoji { font-size: 22px; flex-shrink: 0; color: var(--gold-light); }
.home-faith-text { flex: 1; min-width: 0; }
.home-faith-title {
  font-size: 12px; font-weight: 800; color: var(--gold-light); line-height: 1.3;
}
.home-faith-sub {
  font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 600; margin-top: 2px;
}
.home-faith-arrow {
  font-size: 20px; color: var(--gold-main); font-weight: 700; flex-shrink: 0;
}

/* ── Cartes liste messages ── */
.msg-list-item {
  background: #ffffff;
  border-radius: 12px; padding: 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--cream-dark);
  border-left: 4px solid var(--gold-main);
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
  cursor: pointer; transition: border-color 0.15s;
}
.msg-list-item:active { border-color: var(--navy); }
.msg-list-date  { font-size: 9px; font-weight: 800; color: var(--gold-main); margin-bottom: 4px; }
.msg-list-title { font-size: 13px; color: var(--navy); font-weight: 700; margin-bottom: 3px; }
.msg-list-ref   { font-size: 10px; color: var(--navy-light); }

/* ── Carte Plan de lecture (accueil) ── */
.rp-home-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px; padding: 14px 16px;
  margin-bottom: 12px; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.rp-home-card:active { transform: scale(0.98); opacity: 0.85; }
.rp-home-icon { font-size: 24px; flex-shrink: 0; color: var(--gold-light); }
.rp-home-info { flex: 1; min-width: 0; }
.rp-home-title {
  font-size: 12px; font-weight: 800; color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-home-sub {
  font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-home-arrow { font-size: 20px; color: var(--gold-main); font-weight: 700; flex-shrink: 0; }

.modules-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 16px; }
.module-btn {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 14px;
  padding: 14px 6px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.module-btn:hover { background: var(--cream-dark); transform: scale(0.96); }
.mod-icon  { font-size: 24px; }
.mod-label { font-size: 9px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.3; }

/* ══════════════════════════════
   ÉCRAN 2 — MESSAGES
══════════════════════════════ */
#screen-messages { background: var(--cream); }
.screen-header {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  border-bottom: none;
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 8px;
  position: relative;
  flex-shrink: 0;
  text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.back-btn {
  background: none; border: none;
  color: var(--navy-light); font-size: 22px;
  cursor: pointer; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.back-btn span { font-size: 13px; font-weight: 600; }
.header-title { color: var(--gold-light); font-size: 17px; font-weight: 800; position: relative; z-index: 1; text-align: center; }
.header-sub   { color: rgba(255,255,255,0.90) !important; font-size: 12px; margin-top: 4px; position: relative; z-index: 1; text-align: center; font-weight: 600; letter-spacing: 0.3px; text-shadow: none; opacity: 1; }
.screen-body  { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 28px 16px 16px; max-width: 100%; }

.msg-full-card {
  background: white;
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(30,48,80,0.07);
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 20px; padding: 4px 12px;
  font-size: 9px; font-weight: 800; color: var(--navy);
  letter-spacing: 1px; margin-bottom: 12px;
}
/* Bouton « Écouter le message » — accessibilité de l'écran Message du jour.
   Hauteur 44 px : la cible tactile minimale recommandée par Apple, qui compte
   double ici puisque ce bouton sert d'abord à des personnes qui ne le voient
   pas et le cherchent au doigt. */
.msg-listen-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px;
  margin: 10px 0 14px;
  padding: 10px 16px;
  border: 1px solid rgba(245,192,96,0.55);
  border-radius: 12px;
  background: rgba(245,192,96,0.14);
  color: var(--navy);
  font-family: inherit;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.msg-listen-btn i { font-size: 17px; color: var(--gold-main); }
.msg-listen-btn:hover { background: rgba(245,192,96,0.24); }
/* Lecture en cours : le bouton bascule en plein doré, lisible d'un coup d'œil.
   Libellé en navy et non en blanc : sur ce doré, le blanc ne donne que 2,14:1,
   sous le seuil AA de 4,5:1, alors que le navy atteint 6,15:1. C'est aussi la
   convention des autres boutons dorés de l'app (« ▶ Regarder », vidéothèque). */
.msg-listen-btn.speaking {
  background: var(--gold-main);
  border-color: var(--gold-main);
  color: var(--navy);
}
.msg-listen-btn.speaking i { color: var(--navy); }
/* Anneau de focus visible : la navigation au clavier et au commutateur ne
   doit jamais perdre la trace du bouton. */
.msg-listen-btn:focus-visible {
  outline: 3px solid var(--gold-main);
  outline-offset: 2px;
}

/* Arrivée par un lien d'écoute partagé (?msg=…). Le destinataire vient pour
   écouter, mais les navigateurs interdisent de démarrer la synthèse vocale
   sans un geste de sa part : à défaut de lancer la lecture, on désigne
   clairement le bouton. S'arrête au bout de trois battements — une animation
   sans fin deviendrait une gêne. */
@keyframes battement-ecoute {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,192,96,0); }
  50%      { box-shadow: 0 0 0 10px rgba(245,192,96,.45); }
}
.msg-listen-btn.attire-attention {
  animation: battement-ecoute 1.5s ease-in-out 3;
  border-color: var(--gold-main);
}
/* Respecte le réglage système « réduire les animations » : le battement est
   remplacé par un contraste fixe, tout aussi visible et sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .msg-listen-btn.attire-attention {
    animation: none;
    background: var(--gold-main);
    color: var(--navy);
  }
}

/* ── Ce qu'on va entendre, et où on en est ──────────────────────
   La pastille n'apparaît que les jours où une voix humaine a été déposée
   (js/message-voice.js) ; son absence signifie « voix de l'appareil », pas
   « panne ». La barre de progression, elle, ne sert qu'à l'enregistrement :
   la synthèse n'a pas de durée connue d'avance. Les deux sont posées sous le
   bouton, donc rencontrées juste après lui à la navigation au doigt. */
.msg-voice-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -6px 0 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 48, 80, 0.07);
  color: var(--navy-light, #4a5c7a);
  font-size: 12px; font-weight: 800;
}
.msg-voice-badge i { font-size: 12px; color: var(--gold-deep, #c8902a); }
[data-theme="dark"] .msg-voice-badge {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
}
.msg-voice-bar { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; }
/* Piste épaisse et contrastée : ce cadran s'adresse d'abord aux personnes
   malvoyantes, pour qui un filet de 2 px gris clair n'existe pas. */
.msg-voice-track {
  flex: 1; height: 6px; border-radius: 999px;
  background: rgba(30, 48, 80, 0.16);
  overflow: hidden;
}
.msg-voice-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--gold-main, #f5c060);
  transition: width 0.25s linear;
}
.msg-voice-time {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--navy-light, #4a5c7a);
}
[data-theme="dark"] .msg-voice-track { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .msg-voice-time { color: rgba(255, 255, 255, 0.72); }
@media (prefers-reduced-motion: reduce) {
  .msg-voice-fill { transition: none; }
}

.msg-title { font-size: 20px; font-weight: 900; color: var(--navy); line-height: 1.3; margin-bottom: 12px; }
.msg-body  { font-size: 13px; color: var(--navy-light); line-height: 1.7; text-transform: uppercase; font-weight: 600; }
.hashtag-box {
  margin-top: 14px; padding: 12px 16px;
  background: rgba(30,48,80,0.05);
  border: 1px solid rgba(30,48,80,0.1);
  border-radius: 14px;
}
.hashtag-question { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.hashtag-answer   { font-size: 13px; color: var(--navy-mid); font-weight: 600; font-style: italic; }
.verse-box {
  background: var(--cream); border-left: 4px solid var(--gold-main);
  border-radius: 0 14px 14px 0; padding: 14px 16px; margin-top: 16px;
}
.verse-ref  { font-size: 10px; font-weight: 800; color: var(--navy); margin-bottom: 5px; }
.verse-text { font-size: 13px; color: var(--navy-mid); line-height: 1.6; font-style: italic; }
.decla-box {
  background: linear-gradient(135deg, #fff5e0, #fde8c0);
  border: 1px solid rgba(240,160,64,0.3);
  border-radius: 16px; padding: 14px; margin-top: 12px;
}
.decla-label { font-size: 9px; font-weight: 800; color: var(--amber); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.decla-text  { font-size: 13px; color: var(--navy); font-weight: 600; line-height: 1.6; }
.action-row  { display: flex; gap: 10px; margin-top: 14px; }
.btn-primary {
  flex: 1; background: var(--navy); color: var(--gold-light);
  border: none; border-radius: 14px; padding: 13px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  flex: 1; background: var(--cream); color: var(--navy);
  border: 1px solid var(--cream-dark); border-radius: 14px; padding: 13px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ══════════════════════════════
   ÉCRAN 3 — VIDÉOTHÈQUE
══════════════════════════════ */
/* Thème Vidéothèque */
#screen-videos { background: var(--cream); }
.dark-header {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  border-bottom: none;
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 8px;
  flex-shrink: 0;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.dark-header h2 { color: var(--gold-light); font-size: 17px; font-weight: 800; margin: 0 0 1px; text-align: center; }
.dark-header p  { color: rgba(255,255,255,0.90); font-size: 10px; margin: 0; text-align: center; }

/* ══════════════════════════════
   ÉCRAN 4 — BIBLE 
══════════════════════════════ */
#screen-bible { background: var(--cream); }
/* Bible nuit — gradient en fond d'écran, header transparent */
#screen-bible.night-bible {
  background: linear-gradient(
    180deg,
    #1a3a7a 0%,
    rgba(212, 132, 90, 0.25) 15%,
    #181818 32%,
    #181818 100%
  );
}

/* ── En-tête Bible ── */
/* Le dégradé + le fondu vers le fond de page sont dans ::before (couche de
   fond uniquement) pour que le titre et les cartes Langue/Version restent
   100% opaques tout en gardant une transition douce vers le body. */
.bible-header {
  background: transparent;
  padding: calc(env(safe-area-inset-top, 0px) + 32px) 14px 8px;
  flex-shrink: 0;
  position: relative; z-index: 20;
}
.bible-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  z-index: 0;
}
/* Titre + cartes au-dessus du fond dégradé */
.bible-header > * { position: relative; z-index: 1; }
/* Mode nuit : pas de dégradé (vient du fond d'écran) */
#screen-bible.night-bible .bible-header::before { display: none; }
/* Titre "Bible" en haut du header — style cohérent avec les autres pages */
.bible-page-title {
  color: var(--gold-light);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}

/* Compteurs globaux likes/partages (message_engagement/bible_shares_global) */
.bible-share-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}
.bible-share-total span[id$="-wrap"] { display: flex; align-items: center; gap: 4px; }
[data-theme="light"] .bible-share-total { color: var(--navy-mid, #1e3050); }

/* Conteneur des sélecteurs langue + version (sous le bandeau d'en-tête) */
.bible-selectors {
  flex-shrink: 0;
  padding: 6px 14px 4px;
  background: #ffffff;
  border-bottom: 1px solid #ece7dd;
  box-shadow: 0 2px 6px rgba(30,48,80,0.05);
  position: relative;
  z-index: 15;
}
#screen-bible.night-bible .bible-selectors {
  background: #1c1c1c;
  border-bottom-color: #2c2c2c;
  box-shadow: none;
}

/* Logo dans la barre de statut Bible */
.bible-logo-sm {
  height: 28px;
  width: auto;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  opacity: 0.92;
}

.bible-nav-center {
  flex: 1; display: flex; align-items: center; gap: 4px; justify-content: center; min-width: 0;
}
.bible-nav-btn {
  background: var(--cream); border: 1px solid #ddd; border-radius: 20px;
  padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--navy);
  cursor: pointer; display: flex; align-items: center; gap: 3px;
  white-space: nowrap; transition: background 0.15s;
}
.bible-nav-btn:active { background: var(--navy); color: white; }
#screen-bible.night-bible .bible-nav-btn { background: #2e2e2e; border-color: #444; color: #eee; }
.bible-nav-sep { color: var(--navy-light); font-size: 14px; flex-shrink: 0; }
.nav-arrow { font-size: 9px; opacity: 0.55; }

.bible-tools { display: flex; gap: 4px; flex-shrink: 0; }
.btool {
  background: none; border: 1px solid #ddd; border-radius: 8px;
  padding: 5px 7px; font-size: 11px; font-weight: 800; color: var(--navy);
  cursor: pointer; transition: all 0.15s; line-height: 1;
}
.btool:active { background: var(--navy); color: white; border-color: var(--navy); }
#screen-bible.night-bible .btool { color: #ddd; border-color: #444; }

/* ── Sélecteurs Bible (dropdown style settings-row) ── */
.bible-lang-row,
.bible-version-row {
  display: block;
  padding: 0;
  overflow: visible;
}

/* Conteneur dropdown — carte blanche sur le fond navy du header */
.bible-dd-selector {
  margin: 6px 0;
  border: 1px solid #E8E4DC;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(30,48,80,0.08);
}
#screen-bible.night-bible .bible-dd-selector { border-color: #333; background: #1e1e1e; }

/* Ligne cliquable (header du dropdown) */
.bible-dd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  background: white;
  transition: background 0.15s;
}
.bible-dd-header:active { background: var(--cream); }
#screen-bible.night-bible .bible-dd-header { background: #1e1e1e; }
#screen-bible.night-bible .bible-dd-header:active { background: #2a2a2a; }

.bible-dd-icon  { font-size: 18px; flex-shrink: 0; color: var(--gold-main); }
#screen-bible.night-bible .bible-dd-icon { color: var(--gold-main); }
[data-theme="dark"] #screen-bible .bible-dd-icon { color: var(--gold-main); }
.bible-dd-info  { flex: 1; min-width: 0; }
.bible-dd-label {
  font-size: 9px; font-weight: 800; color: var(--gold-deep);
  text-transform: uppercase; letter-spacing: 0.8px;
  display: flex; align-items: center; gap: 5px;
}

#screen-bible.night-bible .bible-dd-label { color: #666; }
.bible-dd-value {
  font-size: 14px; font-weight: 800; color: #0F2547;
  margin-top: 1px;
}
#screen-bible.night-bible .bible-dd-value { color: #ddd; }
.bible-dd-chevron {
  font-size: 18px; color: var(--navy-light);
  transition: transform 0.25s; flex-shrink: 0;
}
.bible-dd-chevron.open { transform: rotate(90deg); }
#screen-bible.night-bible .bible-dd-chevron { color: #666; }

/* Grille langues (3 colonnes) */
.bible-dd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 12px 12px;
  background: white;
  border-top: 1px solid var(--cream-dark);
}
#screen-bible.night-bible .bible-dd-grid { background: #181818; border-top-color: #333; }

.bible-dd-chip {
  background: var(--cream); border: 1.5px solid var(--cream-dark);
  border-radius: 10px; padding: 7px 4px;
  text-align: center; font-size: 11px; font-weight: 700; color: var(--navy-mid);
  cursor: pointer; transition: all 0.15s;
}
.bible-dd-chip.active {
  background: var(--navy); color: var(--gold-light); border-color: var(--navy);
}
.bible-dd-chip:active { transform: scale(0.95); }
#screen-bible.night-bible .bible-dd-chip { background: #2e2e2e; color: #aaa; border-color: #444; }
#screen-bible.night-bible .bible-dd-chip.active { background: var(--gold-main); color: var(--navy); }

/* Liste des versions */
.bible-dd-list {
  display: flex; flex-direction: column;
  background: white;
  border-top: 1px solid var(--cream-dark);
  max-height: 200px; overflow-y: auto;
}
#screen-bible.night-bible .bible-dd-list { background: #181818; border-top-color: #333; }

.bible-dd-ver-item {
  display: flex; align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--cream-dark);
  transition: background 0.15s;
}
.bible-dd-ver-item:last-child { border-bottom: none; }
.bible-dd-ver-item:active { background: var(--cream); }
.bible-dd-ver-item.active {
  background: linear-gradient(90deg, rgba(240,160,64,0.09), transparent);
  border-left: 3px solid var(--gold-main);
  padding-left: 11px;
}
.bible-dd-ver-label { font-size: 13px; font-weight: 700; color: #0F2547; }
.bible-dd-ver-item.active .bible-dd-ver-label { color: var(--gold-deep); font-weight: 800; }
#screen-bible.night-bible .bible-dd-ver-item { border-bottom-color: #2a2a2a; }
#screen-bible.night-bible .bible-dd-ver-label { color: #aaa; }
#screen-bible.night-bible .bible-dd-ver-item:active { background: #2a2a2a; }
#screen-bible.night-bible .bible-dd-ver-item.active { background: rgba(240,160,64,0.12); }
#screen-bible.night-bible .bible-dd-ver-item.active .bible-dd-ver-label { color: var(--gold-light); }

/* Sous-texte de comptage dans les sélecteurs testament */
.bible-dd-sub { font-size: 10px; color: var(--navy-light); margin-top: 2px; }
#screen-bible.night-bible .bible-dd-sub { color: #666; }
[data-theme="dark"] #screen-bible .bible-dd-sub { color: rgba(255,255,255,0.45); }

/* ── Note de secours (version indisponible) ── */
.bible-version-note {
  font-size: 11px; color: #b08040; padding: 0 0 10px;
  text-align: center; line-height: 1.4;
}
#screen-bible.night-bible .bible-version-note { color: #a07030; }

/* ── Zone de contenu : 3 panneaux ── */
.bible-content-area {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
}

/* ── Panneaux (livres / chapitres / lecteur) ── */
.bible-panel {
  position: absolute; inset: 0;
  display: none; flex-direction: column; overflow: hidden;
  background: white;
}
.bible-panel.active { display: flex; }
#screen-bible.night-bible .bible-panel { background: #1e1e1e; }

/* Sous-en-tête de panneau */
.panel-sub-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid #ede8df; flex-shrink: 0;
}
#screen-bible.night-bible .panel-sub-hdr { border-bottom-color: #333; }
.panel-sub-title {
  font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: 0.3px; flex: 1;
}
#screen-bible.night-bible .panel-sub-title { color: #eee; }

/* Bouton retour dans les panneaux — cerclé comme screen-close-btn */
.panel-back-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(30,48,80,0.08);
  border: none;
  color: var(--navy);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s;
}
.panel-back-btn:active { background: rgba(30,48,80,0.18); }
#screen-bible.night-bible .panel-back-btn { color: #ddd; background: rgba(255,255,255,0.12); }

/* Barre de navigation interne au lecteur */
.reader-nav-hdr { background: var(--cream); }
#screen-bible.night-bible .reader-nav-hdr { background: #252525; }
.reader-book-btn {
  background: none; border: none; font-size: 13px; font-weight: 700;
  color: var(--navy); cursor: pointer; padding: 4px 6px;
  border-radius: 8px; transition: background 0.15s;
}
.reader-book-btn:active { background: var(--navy); color: white; }
#screen-bible.night-bible .reader-book-btn { color: #eee; }
.reader-sep { color: var(--navy-light); font-size: 12px; }
.panel-tool-btn {
  background: none; border: 1px solid #ddd; border-radius: 7px;
  padding: 4px 7px; font-size: 11px; font-weight: 800; color: var(--navy);
  cursor: pointer; transition: all 0.15s; line-height: 1;
}
.panel-tool-btn:active { background: var(--navy); color: white; }
.panel-tool-btn:disabled { opacity: 0.35; cursor: default; }
#screen-bible.night-bible .panel-tool-btn { color: #ddd; border-color: #444; }
/* Bouton lecture vocale — état actif (lecture en cours) */
#bible-speak-btn.speaking {
  background: var(--gold-main); color: var(--navy); border-color: var(--gold-main);
  animation: pulse-speak 1.2s ease-in-out infinite;
}
@keyframes pulse-speak {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Corps scrollable du panneau */
.panel-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px;
  -webkit-overflow-scrolling: touch;
}

/* ── Grille des livres ── */
.books-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.book-chip {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 10px; padding: 8px 12px;
  font-size: 11px; font-weight: 600; color: var(--navy-mid);
  cursor: pointer; transition: all 0.15s;
}
.book-chip:active, .book-chip.active-book { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }
#screen-bible.night-bible .book-chip { background: #2a2a2a; color: #bbb; border-color: #3a3a3a; }
#screen-bible.night-bible .book-chip.active-book { background: var(--gold-main); color: var(--navy); }
/* Nuit — cartes et lignes */
#screen-bible.night-bible .testament-card { background: #1e1e1e; border-color: #333; }
#screen-bible.night-bible .testament-card-title { color: #eee; }
#screen-bible.night-bible .testament-card-count { color: #888; }
#screen-bible.night-bible .bible-search-bar { background: #2a2a2a; }
#screen-bible.night-bible .bible-search-bar input { color: #ddd; }
#screen-bible.night-bible .book-row { border-bottom-color: #2a2a2a; }
#screen-bible.night-bible .book-row-name { color: #ccc; }
#screen-bible.night-bible .book-row.active-book .book-row-name { color: var(--gold-main); }
#screen-bible.night-bible .book-row-chaps { color: #666; }
#screen-bible.night-bible .book-row-audio { color: #666; }

/* ── Sélection de Testament (cartes YouVersion) ── */
.testament-card {
  display: flex; align-items: center; gap: 16px;
  background: white; border-radius: 20px;
  padding: 26px 20px; margin-bottom: 16px;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
  border: 1.5px solid rgba(30,48,80,0.06);
}
.testament-card:active { transform: scale(0.97); }
.testament-card-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--navy) 0%, #2a4a7a 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-light); font-size: 28px; flex-shrink: 0;
}
.testament-card.nt .testament-card-icon {
  background: linear-gradient(135deg, #7b5ea7 0%, #9b7ec8 100%);
}
.testament-card-content { flex: 1; min-width: 0; }
.testament-card-title { font-size: 18px; font-weight: 800; color: var(--navy); }
.testament-card-count { font-size: 12px; color: var(--navy-light); margin-top: 4px; }
.testament-card-arrow { color: var(--navy-light); font-size: 16px; flex-shrink: 0; }
/* Barre de recherche dans le panel livres */
.bible-search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream-dark); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 14px;
}
.bible-search-bar i { color: var(--navy-light); font-size: 15px; flex-shrink: 0; }
.bible-search-bar input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 14px; color: var(--navy); font-family: inherit;
}
.bible-search-bar input::placeholder { color: var(--navy-light); }
/* Lignes de livres */
.book-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 4px; border-bottom: 1px solid rgba(30,48,80,0.07);
  cursor: pointer; transition: background 0.1s; border-radius: 8px;
}
.book-row:last-child { border-bottom: none; }
.book-row.active-book { background: rgba(240,160,64,0.1); }
.book-row-name {
  flex: 1; font-size: 14px; font-weight: 600; color: var(--navy);
}
.book-row.active-book .book-row-name { color: var(--gold-main); font-weight: 800; }
.book-row-chaps { font-size: 11px; color: var(--navy-light); margin-right: 4px; }
.book-row-audio {
  background: none; border: none; cursor: pointer;
  color: var(--navy-light); font-size: 17px; padding: 4px 8px;
  transition: color 0.15s; border-radius: 8px; line-height: 1;
}
.book-row-audio:active { color: var(--gold-main); background: rgba(240,160,64,0.1); }
.book-row-arrow { color: rgba(30,48,80,0.3); font-size: 12px; }

/* ── Testament labels (fallback) ── */
.testament-label {
  width: 100%; font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--gold-main); margin: 12px 0 6px; text-transform: uppercase;
}

/* ── Grille chapitres ── */
.chapters-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.chap-chip {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 10px; padding: 10px 4px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  cursor: pointer; text-align: center; transition: all 0.15s;
}
.chap-chip:active, .chap-chip.active-chap { background: var(--navy); color: var(--gold-light); }
#screen-bible.night-bible .chap-chip { background: #2a2a2a; color: #ddd; border-color: #3a3a3a; }
#screen-bible.night-bible .chap-chip.active-chap { background: var(--gold-main); color: var(--navy); }

/* ── Lecteur ── */
.bible-reader {
  flex: 1; min-height: 0;
  overflow-y: auto; padding: 16px 18px;
  scroll-behavior: smooth;
}
/* Tailles de police */
.bible-reader[data-fs="1"] .verse-text { font-size: 14px; }
.bible-reader[data-fs="2"] .verse-text { font-size: 17px; }
.bible-reader[data-fs="3"] .verse-text { font-size: 21px; }

/* ── Spinner ── */
.bible-load-wrap {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 60px 20px;
  color: var(--navy-light); font-size: 13px;
}
.bible-spin {
  width: 34px; height: 34px;
  border: 3px solid #e8e0d0;
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: bspin 0.75s linear infinite;
}
@keyframes bspin { to { transform: rotate(360deg); } }

/* ── Erreur ── */
.bible-err-wrap {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 60px 20px; text-align: center;
}
.bible-retry-btn {
  background: var(--navy); color: white; border: none;
  border-radius: 12px; padding: 10px 22px; font-size: 13px;
  font-weight: 700; cursor: pointer;
}

/* ── Titre du chapitre — masqué (déjà visible dans la barre reader-nav-hdr) ── */
.bible-chap-title { display: none; }
#screen-bible.night-bible .bible-chap-title { color: #666; }

/* ── Versets ── */
.chapter-verses { padding-bottom: 24px; }
.bible-verse {
  display: flex; gap: 10px; padding: 6px 8px;
  border-radius: 8px; margin-bottom: 2px;
  cursor: pointer; transition: background 0.15s;
  user-select: none; -webkit-user-select: none;
}
.bible-verse:active { background: rgba(200,144,42,0.08); }
.bible-verse.highlighted { background: #fff3c4; }
#screen-bible.night-bible .bible-verse.highlighted { background: #3a3010; }
/* Surlignage persistant multi-couleurs (data-hl = yellow|green|blue|pink|orange|purple|red|teal)
   Mode clair : fond pastel (texte foncé lisible).
   Mode sombre : teinte vive plus opaque + liseré gauche → meilleur contraste. */
.bible-verse[data-hl="yellow"] { background: #fff1a8; }
.bible-verse[data-hl="green"]  { background: #c9efc6; }
.bible-verse[data-hl="blue"]   { background: #c7e0fb; }
.bible-verse[data-hl="pink"]   { background: #fbcfe1; }
.bible-verse[data-hl="orange"] { background: #ffd9b0; }
.bible-verse[data-hl="purple"] { background: #e3d2f7; }
.bible-verse[data-hl="red"]    { background: #ffcdcd; }
.bible-verse[data-hl="teal"]   { background: #bff0e9; }
#screen-bible.night-bible .bible-verse[data-hl="yellow"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="yellow"] { background: rgba(245,205,70,0.34);  box-shadow: inset 3px 0 0 #f5cd46; }
#screen-bible.night-bible .bible-verse[data-hl="green"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="green"]  { background: rgba(88,206,118,0.32);  box-shadow: inset 3px 0 0 #58ce76; }
#screen-bible.night-bible .bible-verse[data-hl="blue"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="blue"]   { background: rgba(80,158,240,0.36);  box-shadow: inset 3px 0 0 #509ef0; }
#screen-bible.night-bible .bible-verse[data-hl="pink"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="pink"]   { background: rgba(240,110,168,0.34); box-shadow: inset 3px 0 0 #f06ea8; }
#screen-bible.night-bible .bible-verse[data-hl="orange"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="orange"] { background: rgba(245,150,60,0.36);  box-shadow: inset 3px 0 0 #f5963c; }
#screen-bible.night-bible .bible-verse[data-hl="purple"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="purple"] { background: rgba(168,108,240,0.36); box-shadow: inset 3px 0 0 #a86cf0; }
#screen-bible.night-bible .bible-verse[data-hl="red"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="red"]    { background: rgba(240,84,84,0.34);   box-shadow: inset 3px 0 0 #f05454; }
#screen-bible.night-bible .bible-verse[data-hl="teal"],
[data-theme="dark"] #screen-bible .bible-verse[data-hl="teal"]   { background: rgba(38,198,186,0.32);  box-shadow: inset 3px 0 0 #26c6ba; }

/* Boutons Copier / Surligner dans la barre flottante */
.share-bar-copy, .share-bar-highlight {
  border: none; background: rgba(255,255,255,0.15); color: #fff;
  border-radius: 50%; width: 28px; height: 28px; font-size: 13px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.share-bar-highlight { color: var(--gold-light, #f5c060); }
.share-bar-copy:active, .share-bar-highlight:active { transform: scale(0.9); }

/* Palette de couleurs de surlignage (au-dessus de la barre) */
#bible-hl-palette {
  position: absolute; bottom: 116px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  background: var(--navy, #22304a); border-radius: 14px; padding: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28); z-index: 121;
  animation: slideUpBar 0.2s ease;
}
.hl-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55); cursor: pointer; flex-shrink: 0;
  transition: transform 0.1s;
}
.hl-swatch:active { transform: scale(0.88); }
.hl-swatch[data-hl="yellow"] { background: #fff1a8; }
.hl-swatch[data-hl="green"]  { background: #c9efc6; }
.hl-swatch[data-hl="blue"]   { background: #c7e0fb; }
.hl-swatch[data-hl="pink"]   { background: #fbcfe1; }
.hl-swatch[data-hl="orange"] { background: #ffd9b0; }
.hl-swatch[data-hl="purple"] { background: #e3d2f7; }
.hl-swatch[data-hl="red"]    { background: #ffcdcd; }
.hl-swatch[data-hl="teal"]   { background: #bff0e9; }
.hl-swatch.hl-erase {
  background: transparent; color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
/* Verset sélectionné pour partage multiple */
.bible-verse.verse-selected {
  background: rgba(200,144,42,0.18);
  border-left: 3px solid var(--gold-main, #b8922a);
  padding-left: 5px;
}
#screen-bible.night-bible .bible-verse.verse-selected { background: rgba(200,144,42,0.25); }

/* Barre flottante de partage multi-versets — tap sur la barre = options */
#bible-share-bar {
  position: absolute; bottom: 70px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--navy, #22304a); color: #fff;
  border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  z-index: 120; animation: slideUpBar 0.22s ease;
  cursor: pointer;
}
@keyframes slideUpBar { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.share-bar-cancel {
  border: none; background: rgba(255,255,255,0.15); color: #fff;
  border-radius: 50%; width: 28px; height: 28px; font-size: 13px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.share-bar-count { flex: 1; font-size: 13px; font-weight: 600; }
.share-bar-arrow { font-size: 13px; opacity: 0.7; }
.share-bar-memorize {
  border: none; background: rgba(255,255,255,0.15); color: var(--gold-light, #f5c060);
  border-radius: 50%; width: 28px; height: 28px; font-size: 13px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.share-bar-memorize:active { transform: scale(0.9); }
.share-bar-like {
  position: relative;
  border: none; background: rgba(255,255,255,0.15); color: #e0607a;
  border-radius: 50%; width: 28px; height: 28px; font-size: 13px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.share-bar-like:active { transform: scale(0.9); }
.share-bar-like-count:empty { display: none; }
.share-bar-like-count {
  position: absolute; top: -5px; right: -5px;
  background: #e0607a; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  border-radius: 8px; min-width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* Preview image avec personnalisation */
.verse-img-preview-ov {
  position: absolute; inset: 0; background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 28px 32px;
}
.verse-img-preview-sheet {
  width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center;
  /* Fond propre : sans lui, l'écran du dessous transparaît entre les rangées
     de réglages, d'autant plus depuis l'ajout de la bande de fonds photo. */
  background: rgba(18, 22, 32, 0.92);
  border-radius: 18px; padding: 14px;
}
.verse-img-preview-wrap {
  width: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5); position: relative;
  max-height: calc(46 * var(--vh));
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
}
/* contain, pas cover : l'aperçu doit montrer l'image EXACTE qui sera partagée.
   En cover, le haut du visuel plein cadre était rogné et l'utilisateur
   partageait autre chose que ce qu'il avait vu. */
.verse-img-preview-img {
  max-width: 100%; max-height: calc(46 * var(--vh)); width: auto; height: auto;
  object-fit: contain; display: block; transition: opacity 0.2s;
}
.verse-img-loading {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25); color: #fff; font-size: 22px;
}
/* Sélecteur de fond */
.verse-img-bg-picker {
  display: flex; gap: 10px;
}
.vbg-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, transform 0.1s;
}
.vbg-btn.vbg-active { border-color: var(--gold-main, #b8922a); transform: scale(1.12); }

/* Choix du gabarit : encadré (logo + cadre blanc) ou plein cadre (photo) */
.verse-img-style-tabs {
  display: flex; gap: 8px; width: 100%;
}
.vstyle-btn {
  flex: 1; border: 1.5px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75); border-radius: 12px; padding: 9px 8px;
  font-size: 13px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 6px; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vstyle-btn.vstyle-active {
  background: var(--gold-main, #b8922a); border-color: var(--gold-main, #b8922a); color: #fff;
}

/* Bande de fonds photo — défile horizontalement, la vignette active est cerclée d'or */
.verse-img-photo-strip {
  display: flex; gap: 8px; width: 100%; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.verse-img-photo-strip::-webkit-scrollbar { display: none; }
.vbg-photo-thumb {
  flex: 0 0 auto; width: 46px; height: 58px; padding: 0; overflow: hidden;
  border-radius: 8px; border: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; transition: border-color 0.15s, transform 0.1s;
}
.vbg-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbg-photo-thumb.vbg-active { border-color: var(--gold-main, #b8922a); transform: scale(1.08); }
.vbg-perso { border-style: dashed; }
.verse-img-preview-actions { display: flex; gap: 12px; width: 100%; }
.verse-img-cancel {
  flex: 1; border: 1.5px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
  border-radius: 12px; padding: 12px; font-size: 15px; cursor: pointer;
}
.verse-img-share {
  flex: 2; border: none; background: var(--gold-main, #b8922a); color: #fff;
  border-radius: 12px; padding: 12px; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bible-verse .verse-text { flex: 1; }
.verse-share {
  display: none; flex-shrink: 0; align-self: center;
  border: none; background: transparent; color: var(--gold-main);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.bible-verse.highlighted .verse-share { display: inline-flex; }
.verse-share:active { background: rgba(240,160,64,0.15); }
#screen-bible.night-bible .verse-share { color: var(--gold-light, #f5c060); }
#screen-bible.night-bible .bible-verse { color: #ddd; }
.verse-num {
  font-size: 10px; font-weight: 800; color: var(--gold-main);
  min-width: 18px; padding-top: 5px; flex-shrink: 0; text-align: right;
}
.verse-text {
  font-size: 17px; color: var(--navy); line-height: 1.75;
}
#screen-bible.night-bible .verse-text { color: #ddd; }

/* ── Nav précédent / suivant ── */
.bible-chap-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: white;
  border-top: 1px solid #ede8df; flex-shrink: 0;
}
#screen-bible.night-bible .bible-chap-nav { background: #222; border-top-color: #333; }
.chap-nav-btn {
  background: none; border: none; font-size: 13px; font-weight: 700;
  color: var(--navy); cursor: pointer; padding: 6px 8px;
}
#screen-bible.night-bible .chap-nav-btn { color: #888; }
/* Répétition masquée : le book+chap est déjà dans reader-nav-hdr */
.chap-nav-label { display: none; }

/* ── Bible nuit — barre de navigation basse ── */
#screen-bible.night-bible .bottom-nav {
  background: rgba(18,18,18,0.97);
  border-top: none;
}
#screen-bible.night-bible .nav-btn { color: rgba(255,255,255,0.35); }
#screen-bible.night-bible .nav-btn.active { color: var(--gold-light); }
#screen-bible.night-bible .nav-btn.active-gold { color: var(--gold-light); }

/* ══════════════════════════════
   ÉCRAN 5 — QUESTIONS
══════════════════════════════ */
#screen-questions { background: var(--cream); }
.questions-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 24px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex-shrink: 0;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.questions-hero .q-icon { font-size: 26px; margin-bottom: 4px; color: var(--gold-light); }
.questions-hero h2 { color: var(--gold-light); font-size: 18px; font-weight: 900; text-align: center; }
.questions-hero p  { color: rgba(255,255,255,0.90); font-size: 10px; margin-top: 2px; }
.q-form { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.q-card { background: white; border-radius: 24px; padding: 22px; box-shadow: 0 4px 20px rgba(30,48,80,0.07); }
.q-label { font-size: 12px; font-weight: 700; color: var(--navy-light); margin-bottom: 7px; display: block; }
.q-input {
  width: 100%; background: #fff; border: 2px solid var(--cream-dark);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--navy);
  font-family: inherit; margin-bottom: 14px; outline: none; resize: none;
}
.q-input:focus { border-color: var(--gold-main); }
.q-submit {
  width: 100%; background: linear-gradient(135deg, var(--gold-deep), var(--amber));
  border: none; border-radius: 14px; padding: 15px;
  color: white; font-size: 15px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.15s;
}
.q-submit:hover { opacity: 0.9; }
.q-success {
  display: flex; align-items: center; gap: 10px;
  background: #e8fff5; border: 1px solid #50b896;
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
  display: none;
}
.q-success.visible { display: flex; }
.q-success span { color: #2a7a5a; font-weight: 700; font-size: 14px; }
.q-info {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--cream); border-radius: 14px; padding: 14px; margin-top: 14px;
}
.q-info p { font-size: 12px; color: var(--navy-light); line-height: 1.6; }

/* Bouton "Voir les réponses" sur l'écran Questions */
.q-see-answers {
  display: block; width: 100%; margin-top: 18px;
  background: var(--navy); color: var(--gold-light);
  border: none; border-radius: 14px; padding: 14px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.2px;
}
.q-see-answers:hover { opacity: 0.88; }

/* ══════════════════════════════
   ÉCRAN — QUESTIONS & RÉPONSES
══════════════════════════════ */
#screen-qr { background: var(--cream); }

.qr-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 24px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.qr-hero-icon { font-size: 28px; margin-bottom: 4px; }
.qr-hero h2   { color: var(--gold-light); font-size: 18px; font-weight: 900; text-align: center; }
.qr-hero p    { color: rgba(255,255,255,0.70); font-size: 10px; margin-top: 2px; }

.qr-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 16px;
}

/* Carte Q&R */
.qr-card {
  background: white; border-radius: 20px;
  box-shadow: 0 4px 18px rgba(30,48,80,0.08);
  margin-bottom: 18px; overflow: hidden;
}
.qr-question {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; background: white;
  border-bottom: 1px solid rgba(30,48,80,0.07);
}
.qr-q-icon  { font-size: 22px; flex-shrink: 0; }
.qr-author  { font-size: 10px; color: #6b7aab; font-weight: 600; margin-bottom: 4px; }
.qr-q-text  { font-size: 14px; color: #1e3060; font-weight: 600; line-height: 1.5; }

.qr-answer  {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; background: white;
}
.qr-a-icon  { font-size: 22px; flex-shrink: 0; }
.qr-a-label { font-size: 10px; color: var(--gold-deep); font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.qr-a-text  { font-size: 14px; color: #334; line-height: 1.6; }

/* Vide / loading */
.qr-empty {
  text-align: center; padding: 48px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.qr-empty p { color: var(--navy-light); font-size: 14px; line-height: 1.6; }

/* Carte "Votre question" mise en avant */
.qr-card-mine {
  border: 2px solid var(--gold-main);
  box-shadow: 0 4px 20px rgba(240,160,64,0.25);
}
.qr-mine-badge {
  background: linear-gradient(90deg, var(--gold-deep), var(--amber));
  color: white; font-size: 10px; font-weight: 800;
  padding: 5px 14px; letter-spacing: 0.5px;
  border-radius: 20px 20px 0 0;
}

/* CTA bas de page */
.qr-cta { padding: 8px 0 24px; text-align: center; }
.qr-cta-btn {
  background: linear-gradient(135deg, var(--gold-deep), var(--amber));
  border: none; border-radius: 14px; padding: 14px 28px;
  color: white; font-size: 15px; font-weight: 800; cursor: pointer;
}

/* Dark mode Q&R */
[data-theme="dark"] #screen-qr           { background: #111827; }
[data-theme="dark"] .qr-card             { background: #1C2537; box-shadow: 0 4px 18px rgba(0,0,0,0.3); }
[data-theme="dark"] .qr-question         { background: rgba(100,130,200,0.15); border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .qr-q-text           { color: #d0deff; }
[data-theme="dark"] .qr-author           { color: #8899cc; }
[data-theme="dark"] .qr-answer           { background: #1C2537; }
[data-theme="dark"] .qr-a-text           { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .qr-empty p          { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .q-see-answers       { background: rgba(255,255,255,0.08); color: var(--gold-light); }

/* ── Dark mode : en-têtes désormais blancs → redeviennent sombres ── */
/* Tous les headers ont un dégradé, pas de surcharge dark-mode nécessaire */
[data-theme="dark"] #screen-videos        { background: #111827; }
[data-theme="dark"] #screen-books         { background: #111827; }
[data-theme="dark"] .atb-greet            { color: rgba(255,255,255,0.75); }

/* ══════════════════════════════
   ÉCRAN 6 — PARCOURS DE FOI
══════════════════════════════ */
#screen-parcours { background: var(--cream); }
.parcours-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 22px 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex-shrink: 0;
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.parcours-hero::before {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(245,192,96,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.parcours-badge {
  background: rgba(245,192,96,0.15); border: 1px solid rgba(245,192,96,0.3);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 12px;
  font-size: 9px; font-weight: 800; color: var(--gold-light); letter-spacing: 2px;
  position: relative; z-index: 1;
}
.parcours-title { color: var(--gold-light); font-size: 18px; font-weight: 900; line-height: 1.3; position: relative; z-index: 1; margin-bottom: 2px; text-align: center; }
.parcours-sub   { color: rgba(255,255,255,0.90); font-size: 11px; font-style: italic; position: relative; z-index: 1; margin-bottom: 14px; }
.parcours-quote {
  background: rgba(245,192,96,0.1); border-left: 3px solid var(--gold-main);
  border-radius: 0 12px 12px 0; padding: 12px 14px; text-align: left;
  position: relative; z-index: 1;
}
.parcours-quote p { color: rgba(255,255,255,0.8); font-size: 12px; font-style: italic; line-height: 1.6; }
.parcours-quote cite { color: var(--gold-main); font-size: 10px; font-weight: 700; margin-top: 5px; display: block; font-style: normal; }
.timeline-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.timeline-item { display: flex; gap: 12px; margin-bottom: 14px; }
.timeline-dot {
  width: 36px; height: 36px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.timeline-dot i { font-size: 14px; color: white; }
.timeline-card {
  flex: 1; background: #ffffff;
  border-radius: 16px; padding: 14px;
  border-width: 0 0 0 3px; border-style: solid;
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
.timeline-year  { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 5px; }
.timeline-ctitle { color: #1C2537; font-size: 13px; font-weight: 800; line-height: 1.4; margin-bottom: 6px; }
.timeline-ctext  { color: #445; font-size: 11px; line-height: 1.6; }
/* Cartes dont le récit tient en plusieurs paragraphes : espacement entre eux,
   sans marge parasite en haut ni en bas du bloc. */
.timeline-ctext p       { margin: 0 0 8px; }
.timeline-ctext p:last-child { margin-bottom: 0; }

/* ══════════════════════════════
   ÉCRAN 7 — TÉMOIGNAGES
══════════════════════════════ */
#screen-temoignages { background: var(--cream); }
.temo-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 22px 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex-shrink: 0;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.temo-badge {
  background: rgba(245,192,96,0.15); border: 1px solid rgba(245,192,96,0.3);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 10px;
  font-size: 9px; font-weight: 800; color: var(--gold-light); letter-spacing: 2px;
}
.temo-title { color: var(--gold-light); font-size: 18px; font-weight: 900; line-height: 1.2; margin-bottom: 4px; text-align: center; }
.temo-verse { color: rgba(255,255,255,0.6); font-size: 11px; font-style: italic; line-height: 1.5; }
.temo-stats {
  display: flex; background: rgba(255,255,255,0.1); border: 1px solid rgba(245,192,96,0.2);
  border-radius: 16px; padding: 12px 20px; gap: 20px; margin-top: 16px;
}
.temo-stat { text-align: center; }
.temo-stat-n {
  color: var(--gold-light); font-size: 22px; font-weight: 900;
  display: inline-block;
  transition: color 0.2s;
  min-width: 2ch; /* évite le saut de layout pendant le décompte */
}
.temo-stat-l { color: rgba(255,255,255,0.45); font-size: 9px; margin-top: 2px; letter-spacing: 0.8px; }
.temo-divider { width: 1px; background: rgba(255,255,255,0.15); }

/* Animation : éclat doré quand le compteur atteint sa valeur finale */
@keyframes statGlow {
  0%   { transform: scale(1.3);  color: white;
         text-shadow: 0 0 18px var(--gold-light), 0 0 40px var(--gold-main); }
  60%  { transform: scale(1.05); color: var(--gold-light);
         text-shadow: 0 0 10px rgba(245,192,96,0.6); }
  100% { transform: scale(1);    color: var(--gold-light);
         text-shadow: none; }
}
.temo-stat-n.stat-done { animation: statGlow 0.65s ease-out forwards; }
.temo-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.temo-card {
  background: #ffffff;
  border-radius: 18px; margin-bottom: 12px;
  overflow: hidden; border-left-width: 4px; border-left-style: solid;
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
/* Entête carte : flex pour laisser place à l'avatar */
.temo-card-header { padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; }
.temo-card-htext  { flex: 1; min-width: 0; }
.temo-cat {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 8px; padding: 3px 10px;
  font-size: 8px; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 8px;
}
.temo-card-title  { color: #fff; font-size: 13px; font-weight: 800; line-height: 1.4; margin-bottom: 6px; }
.temo-card-teaser {
  color: rgba(255,255,255,0.78); font-size: 12px; line-height: 1.6;
  white-space: pre-line;               /* conserve les sauts de ligne du texte */
  display: none;                       /* le texte complet n'apparait qu'a l'ouverture */
}
/* Fermé  : on ne voit que le titre (deja tronque + …).
   Ouvert : on masque le titre tronque et on affiche le texte complet a la place
            → le message se prolonge directement, sans duplication. */
.temo-card.open .temo-card-title  { display: none; }
.temo-card.open .temo-card-teaser { display: block; margin-top: 2px; }

/* Avatar circulaire (coin droit de l'entête) */
.temo-avatar {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; margin-top: 2px; border: 2px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
}
.temo-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.temo-avatar-icon { font-size: 20px; line-height: 1; }

/* Bannière photo dans le corps de la carte (visible quand ouvert) */
.temo-photo {
  width: 100%; height: 120px; border-radius: 10px; overflow: hidden;
  margin-bottom: 12px;
}
.temo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.temo-photo-dflt {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; gap: 10px; border-radius: 10px;
}
.temo-photo-dflt-icon { font-size: 30px; opacity: 0.5; }
.temo-photo-dflt-lbl  { font-size: 9px; color: rgba(255,255,255,0.3); letter-spacing: 2px; font-weight: 800; }

/* Ligne auteur */
.temo-author {
  color: rgba(255,255,255,0.3); font-size: 10px; font-style: italic;
  text-align: right; margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px;
}

/* ── Corps de la carte (masqué par défaut, visible quand .open) ── */
.temo-card-body {
  display: none;
  padding: 0 16px 4px;
}
.temo-card-body.open { display: block; }

/* Paragraphes du témoignage */
.temo-card-text {
  color: rgba(255,255,255,0.82);
  font-size: 13px; line-height: 1.75;
  margin: 0 0 10px;
}

/* Bouton "Lire le témoignage complet / Réduire" */
.temo-expand-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 4px 14px 14px;
  padding: 9px 16px;
  background: transparent;
  border: 1.5px solid;
  border-radius: 10px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  text-align: center;
  transition: opacity 0.15s;
}
.temo-expand-btn:active { opacity: 0.7; }

/* Loader pendant le fetch */
.temo-loading {
  text-align: center; padding: 40px 0; color: rgba(255,255,255,0.35);
  font-size: 28px;
}
.temo-loading i { animation: spin 1.5s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bouton "Partager mon témoignage" (dans le screen témoignages) */
.temo-share-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 16px 14px 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(245,192,96,0.15), rgba(212,132,90,0.15));
  border: 1.5px solid rgba(245,192,96,0.4);
  border-radius: 14px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.temo-share-btn:active { background: rgba(245,192,96,0.25); }

/* ══ INSCRIPTION GROUPE DE PRIÈRE — plein écran ══════════ */
.pg-overlay {
  position: absolute; inset: 0; z-index: 800;
  background: var(--cream);
  display: none; flex-direction: column;
}
.pg-overlay.open { display: flex; }
.pg-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 24px 16px;
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.pg-hero-title {
  color: var(--gold-light); font-size: 18px; font-weight: 900;
  text-align: center; margin: 0;
}
.pg-hero-sub {
  color: rgba(255,255,255,0.85); font-size: 10px; margin-top: 3px;
}
.pg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 24px; }
.pg-card {
  background: white; border-radius: 22px;
  padding: 20px 20px 10px;
  box-shadow: 0 4px 20px rgba(30,48,80,0.07);
  margin-bottom: 16px;
}
.pg-label {
  font-size: 11px; font-weight: 700; color: var(--navy-light);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px; display: block;
}
.pg-input {
  width: 100%; border: 1.5px solid #e8ecf2; border-radius: 12px;
  padding: 11px 14px; font-size: 14px; font-family: inherit;
  color: var(--navy); background: white;
  outline: none; display: block; margin-bottom: 14px;
}
.pg-input:focus { border-color: var(--gold-main); }
/* Boutons radio genre */
.pg-radio-group {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.pg-radio-label {
  flex: 1; display: flex; align-items: center; gap: 8px;
  border: 1.5px solid #e8ecf2; border-radius: 12px;
  padding: 10px 14px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--navy);
  transition: border-color 0.15s, background 0.15s;
}
.pg-radio-label input[type="radio"] { accent-color: var(--gold-main); width: 16px; height: 16px; flex-shrink: 0; }
.pg-radio-label:has(input:checked) {
  border-color: var(--gold-main); background: rgba(245,192,96,0.08);
}
[data-theme="dark"] .pg-radio-label { border-color: rgba(255,255,255,0.12); color: #fff; background: #111827; }
[data-theme="dark"] .pg-radio-label:has(input:checked) { border-color: var(--gold-main); background: rgba(245,192,96,0.12); }
/* Sélecteur de pays — même style que pg-input avec flèche */
.pg-select, .temo-select {
  width: 100%; border: 1.5px solid #e8ecf2; border-radius: 12px;
  padding: 11px 36px 11px 14px; font-size: 14px; font-family: inherit;
  color: var(--navy); background: white;
  outline: none; display: block; margin-bottom: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234a6080' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.pg-select:focus, .temo-select:focus { border-color: var(--gold-main); }
[data-theme="dark"] .pg-select {
  background-color: #111827; border-color: rgba(255,255,255,0.1); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .temo-select {
  background-color: #1C2537; border-color: rgba(255,255,255,0.12); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
.pg-submit {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--gold-deep, #c8962a), var(--amber, #e8a52a)); color: #fff;
  font-size: 15px; font-weight: 900; border: none;
  border-radius: 50px; cursor: pointer; font-family: inherit;
}
.pg-submit:active { opacity: 0.85; }
.pg-note { font-size: 11px; color: var(--navy-light); text-align: center; margin-top: 12px; }

/* Formulaire compact : tient sur un écran sans scroll (mobile + desktop) */
.pg-hero  { padding-top: calc(env(safe-area-inset-top, 0px) + 40px) !important; padding-bottom: 12px !important; }
.pg-body  { padding: 12px 14px 8px !important; }
.pg-card  { padding: 14px 16px 10px !important; margin-bottom: 8px !important; }
.pg-label { margin-bottom: 3px !important; font-size: 10px !important; }
.pg-input, .pg-select { margin-bottom: 9px !important; padding-top: 9px !important; padding-bottom: 9px !important; }
.pg-radio-group { margin-bottom: 9px !important; }
.pg-radio-label { padding: 8px 14px !important; }
.pg-submit { padding: 12px !important; }
[data-theme="dark"] .pg-overlay { background: #111827; }
[data-theme="dark"] .pg-card { background: #1C2537; box-shadow: none; }
[data-theme="dark"] .pg-input { background: #111827; border-color: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] .pg-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .pg-label { color: rgba(255,255,255,0.5); }

/* Modal overlay formulaire témoignage */
.temo-form-overlay {
  position: absolute; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end;
}
.temo-form-sheet {
  background: var(--cream);
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-height: 90%;
  overflow-y: auto;
  padding: 0 0 30px;
  animation: slideUp 0.28s ease-out;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.temo-form-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--cream-dark);
  margin: 12px auto 8px;
}
.temo-form-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 14px;
  border-bottom: 1px solid var(--cream-dark);
}
.temo-form-header h3 { font-size: 15px; font-weight: 800; color: var(--navy); }
.temo-form-close {
  background: var(--cream-dark); border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-light);
}
.temo-form-body { padding: 16px 20px; }
.temo-anon-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream-dark); border-radius: 12px; padding: 10px 14px;
  margin-bottom: 14px;
}
.temo-anon-label { font-size: 13px; font-weight: 700; color: var(--navy); }
.temo-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.temo-toggle input { opacity: 0; width: 0; height: 0; }
.temo-toggle-track {
  position: absolute; inset: 0;
  background: #ccc; border-radius: 24px; cursor: pointer; transition: 0.3s;
}
.temo-toggle-track::before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: 0.3s;
}
.temo-toggle input:checked + .temo-toggle-track { background: var(--navy); }
.temo-toggle input:checked + .temo-toggle-track::before { transform: translateX(20px); }
.temo-field { margin-bottom: 12px; }
.temo-label { font-size: 11px; font-weight: 700; color: var(--navy-light); margin-bottom: 5px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.temo-req { color: var(--amber); }
.temo-input {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--cream-dark); border-radius: 12px;
  font-size: 14px; font-family: inherit; color: var(--navy);
  background: #fff; outline: none; transition: border-color 0.2s;
}
.temo-input:focus { border-color: var(--gold-main); }
.temo-textarea { resize: vertical; min-height: 100px; }
.temo-submit-btn {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: var(--gold-light); border: none; border-radius: 14px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  margin-top: 4px; transition: opacity 0.15s;
}
.temo-submit-btn:active { opacity: 0.85; }
.temo-form-note { font-size: 10px; color: var(--navy-light); text-align: center; margin-top: 8px; line-height: 1.5; }
.temo-form-success {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px; text-align: center;
  background: rgba(80,184,150,0.1); border-radius: 14px;
  border: 1px solid rgba(80,184,150,0.3); margin-top: 10px;
}
.temo-form-success span { font-size: 28px; }
.temo-form-success p { font-size: 13px; color: var(--navy); line-height: 1.6; }

/* Bouton "Voir plus" */
.temo-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 0px); margin: 4px 0 14px;
  padding: 12px; border-radius: 14px; cursor: pointer;
  
  /* CORRECTION : Fond légèrement teinté ou transparent, bordure et texte sombres */
  background: rgba(15, 37, 71, 0.03);
  border: 1px dashed rgba(15, 37, 71, 0.25);
  color: #0F2547; /* Le bleu sombre de tes titres */
  
  font-size: 13px; font-weight: 700;
  transition: background 0.2s, border-color 0.2s;
}

.temo-more-btn:hover  { 
  background: rgba(15, 37, 71, 0.07); 
  border-color: rgba(15, 37, 71, 0.4); 
}

.temo-more-btn:active { 
  background: rgba(15, 37, 71, 0.12); 
}

.temo-more-count {
  /* CORRECTION : Un fond orange/or un peu plus soutenu pour contrasté sur le beige */
  background: #F4BE5E; 
  color: #0F2547; /* Texte sombre à l'intérieur du badge pour la lisibilité */
  border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 800;
}
/* ══════════════════════════════
   ÉCRAN 8 — BIBLIOTHÈQUE
══════════════════════════════ */
#screen-books { background: var(--cream); }
.books-header {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  border-bottom: none;
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 8px;
  flex-shrink: 0; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.books-header-title { font-size: 20px; font-weight: 800; color: var(--gold-light); text-align: center; }
.books-header-sub   { font-size: 11px; color: rgba(255,255,255,0.90); margin-top: 2px; text-align: center; }
/* Compatibilité rétro si h2/p encore utilisés */
.books-header h2 { font-size: 20px; font-weight: 800; color: #fff; }
.books-header p  { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.books-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.books-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Livre unique → la carte occupe toute la largeur, couverture agrandie. */
.books-grid-2.books-grid-solo { grid-template-columns: 1fr; }
.books-grid-solo .book-cover       { height: 280px; gap: 14px; }
.books-grid-solo .book-cover-logo  { width: 76px; height: 76px; border-radius: 18px; }
.books-grid-solo .book-cover-title { font-size: 15px; }
.books-grid-solo .book-card-body   { padding: 16px; }
.books-grid-solo .book-card-title  { font-size: 17px; margin-bottom: 3px; }
.books-grid-solo .book-card-author { font-size: 12px; margin-bottom: 12px; }
.books-grid-solo .book-read-btn    { padding: 12px; font-size: 13px; border-radius: 10px; }
.books-grid-solo .book-cs-badge    { font-size: 12px; padding: 8px; }

/* Pagination — au-delà de 4 livres */
.books-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 18px 0 4px;
}
.books-pager-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(30,48,80,0.16);
  background: #fff; color: var(--navy);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, opacity 0.15s;
}
.books-pager-btn:active:not(:disabled) { background: rgba(30,48,80,0.10); }
.books-pager-btn:disabled { opacity: 0.35; cursor: default; }
.books-pager-count { font-size: 12px; font-weight: 700; color: var(--navy-light); }
.book-card {
  background: white; border-radius: 18px;
  overflow: hidden; box-shadow: 0 3px 14px rgba(30,48,80,0.08);
  cursor: pointer; transition: transform 0.15s;
}
.book-card:hover { transform: scale(0.97); }
.book-cover {
  height: 140px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 14px; gap: 8px;
}
.book-cover-icon { font-size: 36px; }
.book-cover-title { color: rgba(255,255,255,0.85); font-size: 10px; font-weight: 700; text-align: center; line-height: 1.3; }
.book-card-body { padding: 10px; }
.book-card-title  { font-size: 11px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.book-card-author { font-size: 9px; color: var(--navy-light); margin-bottom: 8px; }
.book-read-btn { width: 100%; border: none; border-radius: 8px; padding: 7px; font-size: 10px; font-weight: 800; cursor: pointer; color: white; }

/* ── Livres — "Bientôt disponible" ──────────────────────── */
.book-coming-soon { opacity: 0.85; }
.book-cs-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.book-cs-overlay span { font-size: 36px; }
.book-cs-badge {
  width: 100%; font-size: 10px; font-weight: 700;
  color: var(--gold-main);
  background: rgba(245,192,96,0.12);
  border: 1px solid rgba(245,192,96,0.3);
  border-radius: 8px; padding: 5px 6px;
  text-align: center; line-height: 1.3;
}

/* ══ Scrollbar masquée ══ */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ══ Bouton retour — aligné avec le logo dans la zone status bar ══ */
.generic-back,
.back-to-home {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  border-radius: 20px; padding: 5px 13px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.78);
  transition: background 0.15s, border-color 0.15s;
  /* Position absolue dans la zone status-bar (0-44px), même niveau que le logo */
  position: absolute;
  top: 10px;   /* (44px - ~24px bouton) / 2 = 10px → centré dans la barre */
  left: 18px;
  z-index: 101; /* au-dessus de la status-bar (z-index: 100) */
  margin-bottom: 0;
}
.generic-back:active,
.back-to-home:active  { background: rgba(255,255,255,0.2); }

/* Variante fond clair (Bibliothèque, Questions light) */
.back-to-home.on-light {
  border-color: rgba(30,48,80,0.2);
  background: rgba(30,48,80,0.06);
  color: var(--navy-light);
}
.back-to-home.on-light:active { background: rgba(30,48,80,0.14); }

/* ══════════════════════════════════════════
   TABLETTE/DESKTOP — En-têtes réduits
══════════════════════════════════════════ */
@media (min-width: 600px) and (min-height: 700px) {
  /* Responsive desktop — En-têtes compacts, structure identique Plus */
  .home-hero      { min-height: 155px; }
  .home-logo      { width: 120px; }
  .screen-header  { padding: 52px 20px 10px; }
  .dark-header    { padding: 52px 20px 10px; }
  .books-header   { padding: 52px 20px 10px; }
  .bible-header   { padding: 42px 14px 0; }

  /* Questions : compact sur PC */
  .questions-hero { padding: 52px 24px 14px; }
  .questions-hero .q-icon { font-size: 26px; }
  .questions-hero h2 { font-size: 20px; }

  /* Parcours : hero très compact sur PC pour laisser place à la timeline */
  .parcours-hero        { padding: 52px 16px 10px; }
  .parcours-badge       { font-size: 8px; padding: 3px 10px; margin-bottom: 6px; }
  .parcours-title       { font-size: 17px; line-height: 1.2; margin-bottom: 3px; }
  .parcours-sub         { font-size: 11px; margin-bottom: 8px; }
  .parcours-quote       { padding: 7px 10px; }
  .parcours-quote p     { font-size: 10px; line-height: 1.45; }
  .parcours-quote cite  { font-size: 9px; margin-top: 3px; }
  /* Bouton retour : ajustement PC (left aligné sur le padding 20px) */
  .generic-back,
  .back-to-home { left: 20px; padding: 4px 11px; font-size: 11px; }

  /* Témoignages : hero très compact sur PC pour laisser place aux cartes */
  .temo-hero         { padding: 52px 18px 10px; }
  .temo-badge        { font-size: 8px; padding: 3px 10px; margin-bottom: 6px; }
  .temo-title        { font-size: 18px; line-height: 1.2; margin-bottom: 4px; }
  .temo-verse        { font-size: 9px; line-height: 1.4; }
  .temo-stats        { padding: 8px 14px; gap: 14px; margin-top: 10px; }
  .temo-stat-n       { font-size: 18px; }
  .temo-stat-l       { font-size: 8px; }
  /* Cartes : plus compactes sur PC */
  .temo-card-header  { padding: 10px 14px; gap: 8px; }
  .temo-card-title   { font-size: 12px; margin-bottom: 4px; }
  .temo-card-teaser  { font-size: 10px; }
  .temo-card-body    { padding: 10px 14px; }
  .temo-card-text    { font-size: 11px; line-height: 1.7; }
  .temo-expand-btn   { padding: 7px; margin: 0 12px 10px; font-size: 11px; }
  .temo-body         { padding: 10px; }
  .temo-card         { margin-bottom: 8px; border-radius: 14px; }
  .temo-avatar       { width: 38px; height: 38px; }
  .temo-avatar-icon  { font-size: 17px; }
  .temo-photo        { height: 90px; }

  .books-header   { padding: 52px 20px 10px; }
}

/* ══ Témoignage : héro se réduit quand un témoignage est ouvert ══ */
.temo-hero { transition: padding 0.35s ease; }
.temo-hero.mini            { padding: 48px 22px 8px !important; cursor: pointer; }
.temo-hero.mini:active     { opacity: 0.8; }
.temo-hero.mini .temo-badge,
.temo-hero.mini .temo-verse,
.temo-hero.mini .temo-stats { display: none; }
.temo-hero.mini .temo-title {
  font-size: 17px; margin-bottom: 0;
  /* Indicateur discret "appuyer pour fermer" */
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.temo-hero.mini .temo-title::after {
  content: "✕";
  font-size: 13px; opacity: 0.5; font-weight: 400;
}

/* ══ PC : mini-hero doit rester sous la status-bar simulée (44px) ══
   Ce bloc DOIT être après .temo-hero.mini pour gagner sur !important */
@media (min-width: 600px) and (min-height: 700px) {
  .temo-hero.mini { padding: 48px 22px 8px !important; }
}

/* ══ Sélecteur de langue ══ */
.lang-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 5px; padding: 7px 12px;
  background: white;
  border-top: 1px solid rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.lang-pill {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 20px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: var(--navy-light);
  cursor: pointer; transition: all 0.15s;
}
.lang-pill.active { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }

/* ══ Version Bible affichée ══ */
.bible-version-lbl {
  display: inline-block; margin-top: 10px;
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 20px; padding: 5px 14px;
  font-size: 11px; font-weight: 700; color: var(--navy);
}

/* ══════════════════════════════════════════
   MODAL LIVRE — Aperçu + demande
══════════════════════════════════════════ */
.book-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300; display: none; align-items: flex-end;
  /* Même emprise que la feuille des commentaires (.comments-ov) : la feuille
     flotte au lieu de toucher les bords. */
  justify-content: center;
  padding: 0 10px 10px;
}
.book-modal-overlay.open { display: flex; }
.book-modal-sheet {
  background: white;
  border-radius: 20px;
  width: 100%; max-height: 88%;
  overflow-y: auto;
  padding: 14px 20px 32px;
  /* Animation propre : slideUp est partagée par d'autres modals, et il faut
     ici franchir aussi les 10px de gouttière basse. */
  animation: slideUpSheet 0.3s ease;
}
@keyframes slideUpSheet {
  from { transform: translateY(calc(100% + 10px)); }
  to   { transform: translateY(0); }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.book-modal-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: #e0d8cc; margin: 0 auto 16px;
}
.book-modal-cover {
  height: 90px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; margin-bottom: 4px;
}
.book-modal-section {
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold-main);
  margin: 14px 0 7px;
}
.book-modal-text {
  font-size: 13px; color: var(--navy-mid); line-height: 1.75;
}
.book-modal-text.italic { font-style: italic; color: var(--navy-light); font-size: 12px; }
.book-extrait-wrap { position: relative; max-height: 100px; overflow: hidden; }
.book-extrait-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(transparent, white);
}
.book-lock-notice {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 12px; padding: 12px 14px; margin-top: 12px;
  font-size: 11px; color: var(--navy-light); line-height: 1.6;
}
.book-request-btn {
  width: 100%; margin-top: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: var(--gold-light); border: none; border-radius: 14px;
  padding: 14px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: opacity 0.15s;
}
.book-request-btn:hover { opacity: 0.9; }
.book-close-btn {
  width: 100%; margin-top: 8px;
  background: var(--cream); color: var(--navy-light);
  border: 1px solid var(--cream-dark); border-radius: 14px;
  padding: 11px; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ── Couverture affichée EN ENTIER (portrait, responsive) ── */
.book-modal-cover.has-cover {
  background: transparent !important;
  height: auto; padding: 6px 0 2px;
}
.book-modal-cover-img {
  height: clamp(110px, calc(19 * var(--vh)), 175px);
  width: auto; max-width: 60%;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ── 3 boutons : Lire (orange) · Télécharger (navy/or) · Fermer ── */
/* « Lire le livre » = action principale, style « Rejoindre l'événement » */
.book-read-btn {
  width: 100%; margin-top: 14px;
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: #fff; border: none; border-radius: 14px;
  padding: 14px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: opacity 0.15s;
}
.book-read-btn:hover { opacity: 0.9; }
/* « Télécharger » = action secondaire, style « Activer les notifications » */
.book-download-btn {
  width: 100%; margin-top: 10px;
  background: var(--navy); color: var(--gold-light);
  border: none; border-radius: 14px;
  padding: 13px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: opacity 0.15s;
}
.book-download-btn:hover { opacity: 0.9; }

/* ── Modal livre en thème sombre ── */
[data-theme="dark"] .book-modal-sheet {
  background: var(--dark-card);
  color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .book-modal-handle { background: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] #book-modal-title  { color: #fff !important; }
[data-theme="dark"] #book-modal-author { color: rgba(255, 255, 255, 0.6) !important; }
[data-theme="dark"] .book-modal-text   { color: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .book-modal-text.italic { color: rgba(255, 255, 255, 0.6); }
[data-theme="dark"] .book-lock-notice {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .book-extrait-fade {
  background: linear-gradient(transparent, var(--dark-card));
}
[data-theme="dark"] .book-close-btn {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ── Logo Bonjour : cartes & modal ── */
.book-cover-logo {
  width: 46px; height: 46px; border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.book-modal-cover-logo {
  width: 64px; height: 64px; border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ── Pages plein écran (lecteur PDF & résumé), style « Prières » ── */
.book-fullpage {
  position: absolute; inset: 0; z-index: 350;
  display: none; flex-direction: column;
  background: var(--cream);
}
[data-theme="dark"] .book-fullpage { background: #111827; }
.book-fullpage-head {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 18px 14px 56px;
  background: linear-gradient(160deg, var(--navy), var(--navy-mid));
}
/* En-tête du Résumé : occupait 206px, soit un tiers de la page, avant que le
   texte ne commence. Chaque poste est réduit un peu plutôt qu'un seul beaucoup.
   Le padding haut reste >= 46px : c'est le bas du chevron de retour. */
.book-fullpage-head.center {
  flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 46px) 20px 14px;
}
.book-fullpage-head.center .book-fullpage-title { font-size: 18px; }
.book-fullpage-logo    { width: 44px; height: 44px; border-radius: 12px; }
.book-fullpage-logo-lg { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
.book-fullpage-title   { color: #fff; font-size: 19px; font-weight: 800; line-height: 1.25; }
.book-fullpage-sub     { color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.book-fullpage-scroll  { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.book-fullpage-body    { padding: 18px 22px 48px; }
.book-fullpage-body .book-modal-text { font-size: 14px; }
.book-reader-frame     { flex: 1; width: 100%; border: none; background: #fff; }

/* ══ Fond de la page ══ */
.page-bg {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, #2a1a4a, #0a0a1a 60%);
  z-index: -1;
}

/* ══════════════════════════════════════════
   PETIT ÉCRAN EN HAUTEUR (< 700px)
   — réduit les zones hero pour garder le contenu visible
   Sans condition de largeur : ces règles servent surtout au paysage
   (740x360), où elles étaient justement neutralisées par un
   « and (max-width: 599px) » — le hero occupait alors la moitié du cadre.
══════════════════════════════════════════ */
@media (max-height: 700px) {
  .home-hero         { min-height: 145px; }
  .home-logo         { width: 110px; }
  .featured-card     { min-height: 140px; }
  .book-cover        { height: 110px; }
  .screen-header     { padding: 48px 20px 12px; }
  .dark-header       { padding: 48px 20px 4px; }
  .bible-header      { padding: 48px 14px 0; }
  .questions-hero    { padding: 48px 24px 14px; }
  .questions-hero .q-icon { font-size: 24px; }
  .questions-hero h2 { font-size: 20px; }
  .parcours-hero     { padding: 48px 22px 10px; }
  .parcours-title    { font-size: 20px; }
  .temo-hero         { padding: 48px 22px 8px; }
  .temo-title        { font-size: 22px; }
  .books-header      { padding: 48px 20px 8px; }
  .communaute-hero   { padding: 48px 20px 10px; }
  .splash-logo       { width: 160px; height: 160px; }
  .bottom-nav        { padding: 6px 0 10px; }
  .nav-btn i         { font-size: 19px; }
}

/* ══════════════════════════════════════════
   TRÈS PETIT ÉCRAN EN HAUTEUR (< 570px)
   — iPhone SE, petits Android
══════════════════════════════════════════ */
@media (max-height: 570px) {
  .home-hero         { min-height: 130px; }
  .home-logo         { width: 100px; }
  .temo-stats        { padding: 8px 14px; gap: 14px; }
  .temo-stat-n       { font-size: 18px; }
  .parcours-quote    { display: none; }
  .modules-grid      { gap: 6px; }
  .module-btn        { padding: 10px 4px; }
  .mod-icon          { font-size: 20px; }
}

/* ══════════════════════════════════════════
   TRÈS PETITE LARGEUR (< 360px)
   — anciens Android compacts
══════════════════════════════════════════ */
@media (max-width: 360px) {
  .modules-grid       { grid-template-columns: repeat(2, 1fr); }
  .books-grid-2       { grid-template-columns: 1fr; }
  .temo-stats         { flex-direction: column; gap: 8px; }
  .temo-divider       { width: 100%; height: 1px; }
  .splash-btn         { padding: 13px 28px; font-size: 14px; }
  .header-title       { font-size: 19px; }
  .vr-text            { font-size: 16px; }
}

/* ══════════════════════════════════════════
   ÉCRAN VIDÉOS (Thème Clair Inspiré de l'Image)
══════════════════════════════════════════ */

/* Palette de l'image à définir globalement ou localement */
:root {
  --navy-dark: #224263;
  --gold-app: #EAA83A;
  --bg-cream: #FAF5E9;
  --text-muted: #7D8B9B;
}

/* ══ VIDÉOTHÈQUE — Thème Clair
   Palette exacte : Header #26466D · Fond #FFF8EE · Cartes #FFFFFF · Textes #0F2547
══════════════════════════════════════════════════════════════════════════ */
.videos-page-container { background-color: #ffffff; }

.search-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 14px 6px; padding: 10px 14px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(38,70,109,0.10);
  flex-shrink: 0;
}
/* Couleur du placeholder et de l'input dans la barre de recherche */
#screen-videos .search-bar input { color: #0F2547; }
#screen-videos .search-bar input::placeholder { color: rgba(15,37,71,0.35); }
#screen-videos .search-bar i,
#screen-videos .search-bar span { color: #26466D; }

.videos-list {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px;
  -webkit-overflow-scrolling: touch;
}

/* Carte vedette — fond bleu marine + overlay texte */
.featured-card {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, #26466D 0%, #162d44 100%);
  min-height: 160px; margin-bottom: 14px;
  display: flex; align-items: flex-end;
  cursor: pointer; transition: transform 0.15s;
  box-shadow: 0 6px 20px rgba(38,70,109,0.2);
}
.featured-card:hover { transform: scale(0.98); }

.featured-card .featured-badge-v {
  position: absolute; top: 12px; left: 14px;
  background: var(--gold-light); color: #0F2547;
  font-size: 10px; font-weight: 800; border-radius: 20px;
  padding: 4px 10px;
}

.featured-card .play-circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(244,190,94,0.2); border: 2px solid var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-light); font-size: 20px; padding-left: 3px;
}

.vid-info-overlay {
  width: 100%; padding: 12px 14px;
  background: linear-gradient(to top, rgba(22,45,68,0.92) 0%, transparent 100%);
}
.vi-title {
  color: #fff; font-size: 15px; font-weight: 800;
  line-height: 1.3; margin-bottom: 4px;
}
.vi-meta { color: rgba(255,255,255,0.65); font-size: 11px; }

/* Titre des sections (Ex: "6 PRÉDICATIONS") */
.section-label-dark {
  color: rgba(15,37,71,0.55);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 1.2px; padding: 10px 4px 8px; font-weight: 800;
}

/* Lignes vidéo — cartes blanches avec soft shadow */
.vid-row-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 20px;
  background: #FFFFFF;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(38,70,109,0.07);
  transition: background 0.15s, transform 0.15s;
}
.vid-row-item:active { background: var(--cream-dark); transform: scale(0.98); }

.vid-thumb-box {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  position: relative; overflow: hidden;
}

/* ─── Miniatures des vidéos ──────────────────────────────────
   La vraie vignette YouTube est POSÉE SUR l'emoji, jamais à sa place
   (js/media.js, baliseMiniature). Si elle ne charge pas — vidéo retirée,
   appareil hors ligne — l'image se retire et l'emoji réapparaît dessous.
   Une icône générique vaut mieux qu'une icône cassée.
   `object-fit: cover` recadre au passage les bandes noires que YouTube
   ajoute à hqdefault.jpg pour les vidéos au format large. */
.vid-thumb-img,
.featured-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Assombrie : le titre et la pastille « En vedette » se lisent par-dessus. */
.featured-thumb { opacity: 0.72; }
/* Sans quoi le bandeau du titre, non positionné, passerait SOUS la vignette,
   qui l'est. */
.featured-card .vid-info-overlay { position: relative; }

.vi-title-sm {
  color: #0F2547;
  font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 2px;
}
.vi-meta-sm { color: rgba(15,37,71,0.45); font-size: 11px; }
.vi-dur     { color: var(--gold-deep); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* Bouton Regarder — reste dans les tons or/marine */
.vid-watch-btn {
  background: linear-gradient(135deg, var(--gold-deep), var(--amber));
  color: white; border: none; border-radius: 20px;
  padding: 6px 12px; font-size: 11px; font-weight: 800;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: opacity 0.15s;
}
.vid-watch-btn:active { opacity: 0.8; }

/* ══════════════════════════════════════════
   ACCUEIL — Salutation & nouveaux éléments
══════════════════════════════════════════ */
.greeting-block {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 14px;
}
.greeting-emoji { font-size: 28px; flex-shrink: 0; }
.greeting-text {
  font-size: 18px; font-weight: 800; color: var(--navy);
  line-height: 1.2;
}

/* Bannière d'installation PWA */
.pwa-install-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-radius: 16px; padding: 12px 14px; margin-bottom: 14px;
  cursor: pointer; transition: opacity 0.15s;
}
.pwa-install-banner:active { opacity: 0.85; }
.pwa-install-icon { font-size: 24px; flex-shrink: 0; color: var(--gold-light); }
.pwa-install-info { flex: 1; min-width: 0; }
.pwa-install-title { color: white; font-size: 13px; font-weight: 800; }
.pwa-install-sub   { color: rgba(255,255,255,0.55); font-size: 10px; margin-top: 1px; }
.pwa-install-btn {
  background: var(--gold-main); color: var(--navy);
  border: none; border-radius: 20px; padding: 6px 14px;
  font-size: 11px; font-weight: 900; cursor: pointer; flex-shrink: 0;
  transition: transform 0.12s;
}
.pwa-install-btn:active { transform: scale(0.94); }

/* Série de lecture (streak) */
.streak-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px; margin-top: 0; margin-bottom: 12px;
  transition: transform 0.15s, opacity 0.15s;
}
.streak-count { font-size: 18px; font-weight: 900; color: var(--gold-light); }
.streak-label { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 600; }

/* ══════════════════════════════════════════
   MESSAGES — Minuterie de lecture
══════════════════════════════════════════ */
.reading-timer-bar {
  height: 3px; background: rgba(30,48,80,0.08);
  flex-shrink: 0; position: relative;
}
.reading-timer-progress {
  height: 100%; background: var(--gold-main);
  transition: width 1s linear;
  border-radius: 0 2px 2px 0;
}
.reading-badge {
  background: linear-gradient(135deg, #50b896, #3d9a7e);
  color: white; border-radius: 12px;
  padding: 10px 16px; margin-bottom: 12px;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  animation: fadeSlideIn 0.4s ease;
}
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════
   ÉCRAN PLUS — Hub
══════════════════════════════════════════ */
#screen-plus { background: var(--cream); }
.plus-header {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 8px; flex-shrink: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.plus-header-title {
  color: var(--gold-light); font-size: 18px; font-weight: 900; text-align: center;
}
.plus-header-sub {
  color: rgba(255,255,255,0.90); font-size: 10px; margin-top: 1px; text-align: center;
}
.plus-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 16px 12px;
}
.plus-section-label {
  font-size: 11px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 10px 0 6px;
}
.plus-section-label:first-child { margin-top: 0; }
.plus-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 9px; margin-bottom: 4px;
}
.plus-tile {
  background: #ffffff;
  border: 1.5px solid #e8ecf2;
  border-radius: 16px;
  padding: 12px 8px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 6px; cursor: pointer; position: relative;
  transition: background 0.15s, border-color 0.15s;
  min-height: 72px;
}
.plus-tile:active { background: #f5f8ff; border-color: var(--navy); }
.plus-tile-icon {
  font-size: 22px;
  color: var(--gold-main);
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(240,160,64,0.10);
  border-radius: 10px;
}
.plus-tile-label {
  font-size: 11px; font-weight: 700;
  color: var(--navy); text-align: center;
  line-height: 1.3; letter-spacing: 0.1px;
}
.plus-tile-soon  { opacity: 0.65; cursor: default; }
.plus-tile-soon:active { transform: none; }
.plus-soon-badge {
  position: absolute; top: 6px; right: 6px;
  background: var(--gold-main); color: var(--navy);
  font-size: 7px; font-weight: 900; border-radius: 20px;
  padding: 2px 6px; letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════
   ÉCRAN PROFIL
══════════════════════════════════════════ */
#screen-profil { background: var(--cream); }
.profil-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 44px) 20px 6px;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  flex-shrink: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
.profil-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(245,192,96,0.2);
  border: 2px solid rgba(245,192,96,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.profil-hero-name {
  color: var(--gold-light); font-size: 15px; font-weight: 900; margin-top: 2px;
}
/* Nom affiché (lecture seule) dans le hero profil */
.profil-hero-name-display {
  color: var(--gold-light); font-size: 15px; font-weight: 900;
  margin-top: 4px; text-align: center;
  min-height: 20px;
}
.profil-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px 16px;
}
.profil-section-label {
  font-size: 10px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 18px 16px 6px;
}
.profil-section-label:first-child { margin-top: 0; }
.profil-card {
  background: white; border-radius: 16px;
  padding: 12px 14px; margin-bottom: 4px;
  border: 1px solid rgba(30,48,80,0.07);
  box-shadow: 0 2px 8px rgba(30,48,80,0.04);
}
.profil-input {
  width: 100%; border: 1px solid var(--cream-dark);
  border-radius: 10px; padding: 10px 14px;
  font-size: 14px; font-family: inherit; color: var(--navy);
  background: var(--cream); outline: none;
  transition: border-color 0.15s;
}
.profil-input:focus { border-color: var(--gold-main); }
.profil-lang-bar {
  border: none; background: none; padding: 0; margin: 0;
}
.profil-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 4px;
}
.profil-stat-card {
  background: white; border-radius: 16px;
  padding: 14px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid rgba(30,48,80,0.07);
  box-shadow: 0 2px 8px rgba(30,48,80,0.04);
}
.profil-stat-n {
  font-size: 22px; font-weight: 900; color: var(--navy);
  line-height: 1;
}
.profil-stat-icon { font-size: 20px; color: var(--gold-main); line-height: 1; }
.profil-stat-l   { font-size: 10px; font-weight: 800; color: var(--navy); }
.profil-stat-sub { font-size: 8px; color: var(--navy-light); text-align: center; line-height: 1.3; }
.profil-reward-card {
  background: linear-gradient(135deg, #fff8e8, #fde8c0);
  border: 1px solid rgba(240,160,64,0.35);
  border-radius: 18px; padding: 16px;
  margin-top: 14px;
}
.profil-reward-top {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
.profil-reward-icon { font-size: 28px; flex-shrink: 0; }
.profil-reward-title {
  font-size: 13px; font-weight: 900; color: var(--navy); margin-bottom: 4px;
}
.profil-reward-desc {
  font-size: 11px; color: var(--navy-light); line-height: 1.5;
}
.profil-reward-bar-wrap {
  background: rgba(30,48,80,0.1); border-radius: 20px;
  height: 8px; overflow: hidden; margin-bottom: 6px;
}
.profil-reward-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-main), var(--gold-deep));
  border-radius: 20px; transition: width 0.6s ease;
}
.profil-reward-pct {
  font-size: 11px; font-weight: 700; color: var(--amber);
  text-align: right;
}

/* ══ Profil — Compte & settings-row langue ══ */
.profil-account-card { padding: 14px 16px; }
.profil-account-row  { display: flex; align-items: center; gap: 14px; }
.profil-account-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(245,192,96,0.2), rgba(240,160,64,0.3));
  border: 2px solid rgba(245,192,96,0.5);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  overflow: hidden; position: relative;
}
.profil-account-info  { flex: 1; min-width: 0; }
.profil-name-inline {
  width: 100%; max-width: 240px; border: none; border-bottom: 1.5px solid var(--cream-dark);
  background: none; font-size: 16px; font-weight: 800; color: var(--navy);
  font-family: inherit; padding: 2px 0 4px; outline: none;
  transition: border-color 0.2s;
}
.profil-name-inline:focus { border-bottom-color: var(--gold-main); }
.profil-name-inline::placeholder { font-weight: 400; color: var(--navy-light); font-size: 14px; }
.profil-account-sub { font-size: 10px; color: var(--navy-light); margin-top: 4px; }

/* Settings card style (inspired by YouVersion) */
.profil-settings-card {
  background: white; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(30,48,80,0.07);
  box-shadow: 0 2px 8px rgba(30,48,80,0.04); margin-bottom: 4px;
}
.psr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; transition: background 0.15s;
  border-bottom: 1px solid rgba(30,48,80,0.05);
}
.psr:last-child { border-bottom: none; }
.psr:active { background: #f0f4f8; }
.psr-left    { display: flex; align-items: center; gap: 12px; }
.psr-icon {
  font-size: 17px;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(30,48,80,0.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--navy);
}
.psr-info    {}
.psr-title   { font-size: 13px; font-weight: 700; color: var(--navy); }
.psr-sub     { font-size: 11px; color: var(--navy-light); margin-top: 1px; }
.psr-chevron {
  font-size: 20px; color: var(--navy-light);
  transition: transform 0.25s; display: inline-block;
}
.psr-chevron.open { transform: rotate(90deg); }

/* Sélecteur de langue dépliable dans le profil */
.psr-lang-expand {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(30,48,80,0.06);
  background: var(--cream);
}
.psr-lang-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.psr-lang-btn {
  background: white; border: 1.5px solid var(--cream-dark);
  border-radius: 10px; padding: 8px 4px;
  font-size: 11px; font-weight: 700; color: var(--navy);
  cursor: pointer; transition: all 0.15s; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.psr-lang-btn:active { transform: scale(0.94); }
.psr-lang-btn.active {
  background: var(--navy); color: var(--gold-light);
  border-color: var(--navy);
}

/* ══════════════════════════════════════════
   ÉCRAN COMMUNAUTÉ
══════════════════════════════════════════ */
#screen-communaute { background: var(--cream); }
.communaute-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 10px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  transition: padding 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}
/* Collapse quand un élément intérieur est actif */
.communaute-hero.collapsed {
  padding: 48px 20px 12px;
}
.communaute-hero.collapsed .communaute-hero-icon,
.communaute-hero.collapsed .communaute-hero-sub {
  display: none;
}
.communaute-hero.collapsed .communaute-hero-title {
  font-size: 16px;
}
.communaute-hero-icon  { font-size: 26px; margin-bottom: 2px; transition: font-size 0.3s; color: var(--gold-light); }
.communaute-hero-title { color: var(--gold-light); font-size: 18px; font-weight: 900; margin: 0; transition: font-size 0.3s; text-align: center; }
.communaute-hero-sub   { color: rgba(255,255,255,0.90); font-size: 10px; text-align: center; }
.communaute-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px 20px;
}
.communaute-verse-block {
  background: white; border-radius: 16px; padding: 16px;
  border: 1px solid rgba(30,48,80,0.08);
  box-shadow: 0 2px 10px rgba(30,48,80,0.06); margin-bottom: 18px;
}
.communaute-verse-text {
  font-size: 13px; color: var(--navy-mid); font-style: italic;
  line-height: 1.6; margin-bottom: 6px;
}
.communaute-verse-ref { font-size: 10px; font-weight: 800; color: var(--gold-main); }
.communaute-section-label {
  font-size: 10px; font-weight: 800; color: var(--navy-light);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px;
}
.communaute-feature {
  display: flex; align-items: center; gap: 12px;
  background: white; border-radius: 14px; padding: 14px;
  margin-bottom: 9px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(30,48,80,0.05);
  transition: transform 0.14s; border: 1px solid rgba(30,48,80,0.05);
}
.communaute-feature:active { transform: scale(0.97); }
.cf-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  color: rgba(255,255,255,0.85);
}
.cf-content  { flex: 1; min-width: 0; }
.cf-title    { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 3px; }
.cf-sub      { font-size: 11px; color: var(--navy-light); line-height: 1.4; }
.cf-chevron  { color: var(--navy-light); font-size: 18px; flex-shrink: 0; }
.communaute-cta-label {
  text-align: center; font-size: 14px; font-weight: 800;
  color: var(--navy); margin-top: 20px; margin-bottom: 4px;
}
.communaute-cta-sub {
  text-align: center; font-size: 11px; color: var(--navy-light);
  margin-bottom: 14px; line-height: 1.5;
}
/* 3 boutons contact (WhatsApp · Email · Téléphone) */
.contact-options {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 10px;
}
.contact-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 8px; border-radius: 16px;
  text-decoration: none; font-weight: 800; font-size: 12px;
  transition: transform 0.15s, opacity 0.15s; cursor: pointer;
}
.contact-btn:active { transform: scale(0.95); opacity: 0.85; }
.contact-btn-icon  { font-size: 24px; }
.contact-btn-label { font-size: 11px; font-weight: 800; }
.contact-btn-wa    { background: #25d366; color: #fff; }
.contact-btn-email { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); color: var(--gold-light); }
.contact-btn-phone { background: #f5c060; color: var(--navy); }

/* ══════════════════════════════════════════
   CENTRE DE PRIÈRE VIRTUEL
══════════════════════════════════════════ */
.prayer-center-card {
  background: linear-gradient(150deg, #0d1e36 0%, #1a3055 60%, #0f2840 100%);
  border: 1.5px solid rgba(245,192,96,0.35);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.prayer-center-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,192,96,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.prayer-center-top {
  text-align: center;
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.prayer-fire-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--amber), var(--gold-main));
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 8px;
}
.prayer-subtitle {
  font-size: 11px;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.5;
}
.prayer-theme {
  background: rgba(245,192,96,0.12);
  border: 1px solid rgba(245,192,96,0.25);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-light);
  text-align: center;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.prayer-meta {
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.prayer-meta-row {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
  line-height: 1.5;
}
.prayer-schedule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,192,96,0.08);
  border: 1px solid rgba(245,192,96,0.2);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 8px;
}
.prayer-clock { font-size: 16px; }
#prayer-time-display {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-light);
  flex: 1;
}
.prayer-tz {
  font-size: 10px;
  color: rgba(245,192,96,0.6);
  font-style: italic;
}
.prayer-time-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.prayer-gmt-sep {
  color: rgba(255,255,255,0.3); font-size: 10px;
}
.prayer-gmt {
  font-size: 10px; color: rgba(255,255,255,0.45); font-style: italic;
}
.prayer-body-text {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 12px;
  margin-bottom: 16px;
}
.prayer-body-text p {
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  margin-bottom: 8px;
}
.prayer-body-text strong { color: var(--gold-light); }
.prayer-cta-line {
  color: rgba(245,192,96,0.9) !important;
  font-style: italic;
}
.prayer-meet-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy);
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  border-radius: 14px;
  padding: 13px 16px;
  position: relative; z-index: 1;
  transition: opacity 0.15s, transform 0.15s;
}
.prayer-meet-btn:hover  { opacity: 0.9; }
.prayer-meet-btn:active { transform: scale(0.97); }

/* ══════════════════════════════════════════
   MODAUX GÉNÉRIQUES (bottom-sheet)
══════════════════════════════════════════ */
.modal-sheet-overlay {
  position: absolute; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end;
}
.modal-sheet {
  background: var(--cream);
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-height: 88%;
  overflow-y: auto;
  padding-bottom: 32px;
  animation: slideUp 0.28s ease-out;
}
.modal-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--cream-dark);
  margin: 12px auto 8px;
}
.modal-sheet-header {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 56px 14px;
  border-bottom: 1px solid var(--cream-dark);
}
.modal-sheet-header h3 {
  font-size: 15px; font-weight: 800;
  color: var(--gold-main);
  text-align: center;
}
.modal-sheet-close {
  position: absolute;
  left: 16px;
  top: 50%; transform: translateY(-50%);
  background: var(--cream-dark); border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  touch-action: manipulation;
}
.modal-sheet-body { padding: 18px 20px; }

/* Événements */
.event-card {
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  border-radius: 18px; padding: 18px; margin-bottom: 18px;
  overflow: hidden; position: relative;
}
.event-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(245,192,96,0.12), transparent 60%);
}
.event-card-top { position: relative; z-index: 1; }
.event-badge {
  display: inline-block; background: var(--amber); color: white;
  font-size: 9px; font-weight: 900; letter-spacing: 1px;
  border-radius: 20px; padding: 3px 12px; margin-bottom: 8px;
}
/* Badge de la fiche pendant le créneau du service de réveil : même code
   couleur que le bandeau d'accueil — l'ambre ordinaire tant que la prière
   approche, le rouge une fois qu'elle a commencé. */
.event-badge-live { background: #c0392b; color: #fff; }
.event-title { color: white; font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.event-meta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.event-meta span { font-size: 11px; color: rgba(245,192,96,0.7); }
.event-tz { opacity: 0.7; font-style: italic; }
.event-desc {
  font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.6;
  position: relative; z-index: 1; margin-bottom: 14px;
}
.event-join-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: #fff; font-size: 13px; font-weight: 800;
  border-radius: 12px; padding: 11px; position: relative; z-index: 1;
}
.event-join-btn:active { opacity: 0.85; }
.event-notif-section { text-align: center; }
.event-notif-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.event-notif-btn {
  background: var(--navy); color: var(--gold-light); border: none;
  border-radius: 12px; padding: 11px 20px; font-size: 13px; font-weight: 700;
  cursor: pointer; width: 100%; transition: opacity 0.15s;
}
.event-notif-btn:active { opacity: 0.85; }
.event-notif-note { font-size: 11px; color: var(--green); margin-top: 8px; font-weight: 600; }

/* ── Activités — fond sombre de l'écran ───────────────────── */
#screen-activites { background: var(--navy) !important; }
#screen-activites .screen-body,
#activites-list { background: var(--navy) !important; }

/* ── Activités — cartes ───────────────────────────────────── */
.activite-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,0.07); border-radius: 16px;
  padding: 16px; margin-bottom: 16px; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  border-left: 4px solid var(--gold-main);
}
.activite-card:active { transform: scale(0.97); opacity: 0.85; }
.activite-thumb {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 12px;
  overflow: hidden; background: rgba(0,0,0,0.3);
}
.activite-thumb img { width: 100%; height: 100%; object-fit: cover; }
.activite-thumb-dflt {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.activite-card-body { flex: 1; min-width: 0; }
.activite-badge {
  font-size: 9px; font-weight: 900; letter-spacing: 1px;
  margin-bottom: 5px; text-transform: uppercase;
}
.activite-title {
  font-size: 14px; font-weight: 800; color: #ffffff;
  line-height: 1.3; margin-bottom: 5px;
}
.activite-desc {
  font-size: 11px; color: rgba(255,255,255,0.65);
  line-height: 1.5; margin-bottom: 8px;
}
.activite-date { font-size: 10px; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.activite-btn {
  display: inline-block; font-size: 11px; font-weight: 800;
  color: #14213d; border-radius: 8px; padding: 5px 12px;
  margin-top: 2px;
}

/* Carte notification activité sur l'accueil — même style que rp-home-card */
.activite-notif-card {
  display: none; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border: none;
  border-radius: 18px; padding: 14px 16px; margin: 0 0 12px;
  cursor: pointer; transition: transform 0.15s, opacity 0.15s;
}
.activite-notif-card:active { transform: scale(0.97); opacity: 0.85; }
.activite-notif-icon { font-size: 24px; flex-shrink: 0; color: var(--gold-light); }
.activite-notif-left { flex: 1; min-width: 0; }
/* « Prochain événement » → exactement comme « Plan de lecture » (rp-home-title) */
.activite-notif-badge {
  font-size: 12px; font-weight: 800; letter-spacing: 0;
  color: var(--gold-light); margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.activite-notif-badge::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}
/* « SERVICE DE RÉVEIL » → même style/taille que « PRIÈRE & INTERCESSION » (msg-tag) */
.activite-notif-title {
  font-size: 9px; font-weight: 700; color: var(--gold-light);
  letter-spacing: 1.5px; margin-bottom: 4px;
}
.activite-notif-sub { font-size: 11px; color: rgba(255,255,255,0.78); }
.activite-notif-arrow {
  font-size: 22px; color: var(--gold-main); margin-left: 10px; font-weight: 300;
}

/* Préférences notifications */
.notif-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--cream-dark);
  gap: 14px;
}
.notif-row:last-of-type { border-bottom: none; }
.notif-row-info { flex: 1; }
.notif-row-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.notif-row-sub   { font-size: 11px; color: var(--navy-light); line-height: 1.4; }
.notif-row-sub-item { padding-top: 0; padding-left: 4px; }
.notif-hour-input {
  border: 1.5px solid var(--cream-dark); border-radius: 10px;
  padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--navy);
  font-family: inherit; background: #fff;
}
[data-theme="dark"] .notif-hour-input { background: #1C2537; border-color: rgba(255,255,255,0.15); color: #fff; }
.notif-perm-box {
  background: rgba(232,119,106,0.1); border: 1px solid rgba(232,119,106,0.3);
  border-radius: 12px; padding: 12px 14px; margin-top: 10px; text-align: center;
}
.notif-perm-box p { font-size: 12px; color: var(--navy); margin-bottom: 8px; }
.notif-perm-btn {
  background: var(--red); color: white; border: none; border-radius: 10px;
  padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.notif-settings-note { font-size: 10px; color: var(--navy-light); text-align: center; margin-top: 14px; line-height: 1.5; }
.notif-settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ══════════════════════════════════════════
   MODALE D'ONBOARDING (premier lancement)
══════════════════════════════════════════ */
.onboarding-overlay {
  position: absolute; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, var(--navy) 0%, #0d1e36 100%);
  display: flex; justify-content: center;
  padding: 20px;
  animation: obFadeIn 0.4s ease;
  /* Le choix de la langue est le tout premier écran : il ne doit jamais
     être hors d'atteinte. En dessous de ~620 px de haut (paysage, ou zoom
     du navigateur) la modale dépasse en haut ET en bas ; avec
     align-items:center la partie haute d'un enfant trop grand devient
     inatteignable même en défilant — d'où le couple
     « overflow-y:auto + margin:auto sur l'enfant », qui centre tant que ça
     tient et laisse défiler dès que ça déborde. */
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.onboarding-modal { margin: auto; }
@keyframes obFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.onboarding-modal {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.onboarding-logo {
  width: 100px; height: 100px; object-fit: cover;
  border-radius: 50%; margin-bottom: 16px;
  background: #ffffff; padding: 10px;
  border: 3px solid rgba(245,192,96,0.65);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.onboarding-welcome {
  color: rgba(255,255,255,0.4); font-size: 10px;
  font-weight: 600; letter-spacing: 1px; text-align: center; margin-bottom: 6px;
}
.onboarding-title {
  color: var(--gold-light); font-size: 20px; font-weight: 900;
  text-align: center; margin-bottom: 4px;
}
.onboarding-sub {
  color: rgba(255,255,255,0.4); font-size: 11px; text-align: center;
  margin-bottom: 22px;
}
.onboarding-lang-grid {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 18px;
}
.ob-lang-btn {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; transition: all 0.15s;
  color: white;
}
.ob-lang-btn:hover, .ob-lang-btn:active {
  background: rgba(245,192,96,0.18);
  border-color: var(--gold-main);
  transform: scale(0.96);
}
.ob-flag { font-size: 26px; }
.ob-name { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }
.onboarding-hint {
  color: rgba(255,255,255,0.28); font-size: 9px; text-align: center;
  line-height: 1.5; padding: 0 10px;
}

/* ══ Responsive — screens Plus et Profil ══ */
@media (min-width: 600px) and (min-height: 700px) {
  .plus-header  { padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 14px; }
  .profil-hero  { padding: calc(env(safe-area-inset-top, 0px) + 44px) 20px 6px; }
  .profil-avatar { width: 42px; height: 42px; font-size: 20px; }
  .communaute-hero { padding: calc(env(safe-area-inset-top, 0px) + 52px) 20px 20px; }
}
@media (max-height: 700px) {
  .plus-header  { padding: calc(env(safe-area-inset-top, 0px) + 48px) 20px 10px; }
  .plus-tile    { padding: 10px 5px 7px; }
  .plus-tile-icon { font-size: 20px; width: 32px; height: 32px; }
  .profil-hero  { padding: calc(env(safe-area-inset-top, 0px) + 40px) 20px 4px; }
  .profil-avatar { width: 40px; height: 40px; font-size: 18px; }
  .profil-hero-name { font-size: 16px; }
  .onboarding-lang-grid { gap: 6px; }
  .ob-lang-btn  { padding: 9px 4px; }
  .ob-flag      { font-size: 22px; }
  .communaute-hero { padding: calc(env(safe-area-inset-top, 0px) + 48px) 16px 16px; }
  .communaute-hero-icon { font-size: 32px; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE COMPLET — Sprint 3
   Cadre téléphone bien proportionné sur toutes tailles
══════════════════════════════════════════════════════ */

/* Tablette : cadre centré, bords arrondis */
@media (min-width: 600px) and (min-height: 700px) {
  /* Modaux bottom-sheet : limités à la largeur du cadre */
  .modal-sheet-overlay,
  .temo-form-overlay,
  .book-modal-overlay,
  .onboarding-overlay {
    border-radius: 44px;
    overflow: hidden;
  }
  .modal-sheet,
  .temo-form-sheet,
  .book-modal-sheet {
    max-width: 390px;
    margin: 0 auto;
  }
  /* Prayer center : réduire taille police sur cadre étroit */
  .prayer-fire-badge { font-size: 9px; }
  .prayer-meet-btn   { font-size: 12px; padding: 11px 14px; }
  /* Formulaire témoignage */
  .temo-share-btn    { width: calc(100% - 28px); }
}

/* Desktop large ≥ 1024px */
@media (min-width: 1024px) and (min-height: 700px) {
  .modal-sheet,
  .temo-form-sheet,
  .book-modal-sheet {
    max-width: 430px;
    margin: 0 auto;
  }
  /* Textes légèrement plus grands dans le cadre 430px */
  .prayer-body-text p { font-size: 13px; }
  .prayer-fire-badge  { font-size: 10px; }
  .notif-row-title    { font-size: 14px; }
  .event-title        { font-size: 16px; }
  .temo-form-header h3 { font-size: 16px; }
}

/* Petits téléphones (iPhone SE, ≤ 375px) */
@media (max-width: 375px) {
  .prayer-center-card  { padding: 16px; }
  .prayer-fire-badge   { font-size: 9px; letter-spacing: 0.5px; }
  .prayer-meet-btn     { font-size: 12px; padding: 11px; }
  #prayer-time-display { font-size: 13px; }
  .temo-share-btn      { font-size: 12px; padding: 10px 14px; }
  .event-card          { padding: 14px; }
  .notif-row-title     { font-size: 12px; }
  .plus-tile           { padding: 9px 4px 7px; }
  .plus-tile-label     { font-size: 9px; }
}

/* ══════════════════════════════
   AVATAR UPLOAD
══════════════════════════════ */
#profil-avatar-circle {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#profil-avatar-circle:hover .profil-avatar-hint { opacity: 1; }
.profil-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.profil-avatar-hint {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.38);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: 0;
  transition: opacity 0.2s;
}
/* Always show hint on touch devices — but hide when a real photo is loaded */
@media (hover: none) {
  .profil-avatar-hint { opacity: 0.6; }
  #profil-avatar-circle.has-avatar .profil-avatar-hint { opacity: 0; }
}
/* Account-card avatar image */
.profil-account-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}

/* ══════════════════════════════
   GROUPE DE PRIÈRE
══════════════════════════════ */
.prayer-group-card {
  background: linear-gradient(135deg, #1a4060 0%, #0d2a45 100%);
  border: 1px solid rgba(245,192,96,0.25);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.prayer-group-card:active { transform: scale(0.98); }
.prayer-group-badge {
  display: inline-block;
  background: rgba(245,192,96,0.15);
  border: 1px solid rgba(245,192,96,0.3);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 9px; font-weight: 800;
  color: var(--gold-light); letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.prayer-group-title {
  color: var(--gold-light);
  font-size: 18px; font-weight: 900; margin: 0 0 6px;
}
.prayer-group-sub {
  color: rgba(255,255,255,0.65);
  font-size: 12px; line-height: 1.5; margin: 0 0 14px;
}
.prayer-group-info {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
.prayer-group-join-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--gold-deep), var(--amber));
  border: none; border-radius: 14px; padding: 13px;
  color: white; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: opacity 0.15s;
}
.prayer-group-join-btn:active { opacity: 0.85; }
.prayer-group-lang-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255,255,255,0.65);
}
[data-theme="light"] .prayer-group-lang-note { color: rgba(30,48,80,0.62); }

/* ══ MODAL 9 NATIONS CONNECTÉES — full screen ══════════ */
.nations-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: stretch; justify-content: center;
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.nations-modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.nations-modal-sheet {
  position: relative;
  background: var(--navy, #0f2044);
  border-radius: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 20px 32px;
  transform: translateY(40px);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
}
.nations-modal-overlay.open .nations-modal-sheet {
  transform: translateY(0);
}
.nations-modal-handle { display: none; }
.nations-modal-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 14px; right: auto;
}
.nations-modal-title {
  color: var(--gold-light); font-size: 19px; font-weight: 900;
  margin: 0 0 18px; text-align: center;
}
.nations-section {
  margin-bottom: 20px;
}
.nations-section-h3 {
  color: var(--gold-light, #f5c060);
  font-size: 15px; font-weight: 800;
  margin: 0 0 6px;
}
.nations-section-sub {
  color: rgba(255,255,255,0.65);
  font-size: 12px; line-height: 1.5;
  margin: 0 0 14px;
}
.nations-nl-form {
  display: flex; flex-direction: column; gap: 10px;
}
.nations-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 11px 14px;
  color: #fff; font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.nations-input::placeholder { color: rgba(255,255,255,0.4); }
.nations-input:focus { border-color: var(--gold-light, #f5c060); }
.nations-submit-btn {
  background: linear-gradient(135deg, var(--gold-deep, #c8962a), var(--amber, #e8a52a));
  border: none; border-radius: 14px; padding: 13px;
  color: #fff; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: opacity 0.15s;
}
.nations-submit-btn:active { opacity: 0.85; }
.nations-success {
  text-align: center; padding: 18px 0;
  color: #7fff7f; font-size: 14px; font-weight: 700;
}
.nations-divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 6px 0 20px;
}
.nations-don-btn {
  display: block; width: 100%;
  background: #ffffff;
  color: var(--gold-deep);
  border: 1.5px solid rgba(240,160,64,0.30);
  box-shadow: 0 1px 6px rgba(240,160,64,0.10);
  border-radius: 14px; padding: 13px;
  font-size: 14px; font-weight: 800;
  text-align: center; text-decoration: none;
  cursor: pointer; transition: opacity 0.15s;
}
.nations-don-btn:active { opacity: 0.85; }
/* Dark : bouton secondaire « Faire un don » (outline doré translucide) */
[data-theme="dark"] .nations-don-btn {
  background: rgba(245,192,96,0.20);
  color: var(--gold-light);
  border: 1px solid rgba(245,192,96,0.35);
  box-shadow: none;
}

/* ══ AUTH UTILISATEUR ════════════════════════════════════ */
.profil-auth-card {
  background: white;
  border-radius: 14px;
  border: 1.5px solid var(--cream-dark);
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.profil-cloud-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
}
.profil-cloud-btn i { color: var(--gold-light); margin-right: 4px; }

/* ── Section profil local — dans screen-auth ── */
.auth-profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 16px;
  margin-bottom: 16px;
}
.auth-profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(245,192,96,0.2);
  border: 2px solid rgba(245,192,96,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--gold-light);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.auth-profile-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  position: absolute; inset: 0;
}
/* Photo chargée → masque l'icône personne ET le badge caméra (juste la photo) */
.auth-profile-avatar:has(img) #auth-avatar-icon,
.auth-profile-avatar:has(img) .profil-avatar-emoji,
.auth-profile-avatar:has(img) .auth-avatar-hint { display: none !important; }
.auth-avatar-hint {
  position: absolute; bottom: 0; right: 0;
  width: 18px; height: 18px;
  background: var(--gold-main);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: white;
}
.auth-name-input {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(245,192,96,0.3);
  border-radius: 10px;
  outline: none;
  color: white;
  font-size: 15px; font-weight: 700;
  padding: 8px 12px;
  text-align: center;
  font-family: inherit;
  width: 80%;
  max-width: 220px;
}
.auth-name-input::placeholder { color: rgba(255,255,255,0.35); }
.auth-name-input:focus { border-color: var(--gold-main); }
/* Champ nom en lecture seule (le nom vient de l'inscription) */
.auth-name-readonly {
  cursor: default;
  border-style: dashed;
  opacity: 0.92;
}
.auth-name-readonly:focus { border-color: rgba(245,192,96,0.3); }
.auth-profile-label {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.profil-cloud-connected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.profil-cloud-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px; flex-shrink: 0;
}
.profil-cloud-info { flex: 1; text-align: left; }
.profil-cloud-email { font-size: 12px; color: var(--navy); font-weight: 700; }
.profil-cloud-status { font-size: 11px; color: var(--green); margin-top: 1px; }
[data-theme="dark"] .profil-cloud-email  { color: #fff; }
[data-theme="dark"] .profil-cloud-status { color: #50b896; }
.profil-cloud-hint {
  font-size: 11px; color: var(--navy-light); margin: 0;
}
.profil-cloud-actions {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.btn-cloud-sync {
  flex: 1; padding: 9px; background: var(--cream); border: 1.5px solid var(--cream-dark);
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  color: var(--navy);
}
.btn-cloud-logout {
  padding: 9px 14px; background: transparent; border: 1.5px solid #ffcccc;
  border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  color: var(--red);
}

/* Auth — plein écran (converti depuis modal) */
.auth-overlay { display: none !important; } /* legacy — remplacé par #screen-auth */
.auth-handle  { display: none; }
.auth-header  { display: none; }
.auth-logo    { display: none; }
.auth-title   { font-size: 17px; font-weight: 900; color: var(--gold-main); text-align: center; }
/* Corps scrollable du screen auth */
#screen-auth .me-body {
  background: transparent;
}
.auth-close {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: #f0f0f0; border: none; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.auth-tabs {
  display: flex; gap: 0;
  margin: 16px 20px 0;
  background: #f0f4f8; border-radius: 10px; padding: 3px;
}
.auth-tab {
  flex: 1; padding: 9px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; background: transparent; color: var(--navy-light);
  transition: all .2s;
}
.auth-tab.active { background: white; color: var(--navy); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.auth-body { padding: 16px 20px 20px; }
.auth-field { margin-bottom: 12px; }
.auth-label { display: block; font-size: 11px; font-weight: 700; color: var(--navy-light); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.auth-input {
  width: 100%; padding: 12px 14px;
  background: #fff; color: var(--navy);
  border: 2px solid var(--cream-dark); border-radius: 12px;
  font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.auth-input:focus { border-color: var(--gold-main); }
.auth-error {
  background: #fff0f0; color: var(--red);
  border: 1px solid #ffcccc; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 12px;
}
.auth-submit {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: white; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-bottom: 12px;
}
/* Mode clair — bouton « Se connecter » façon champ « kiki » (plus de navy plein) */
[data-theme="light"] .auth-submit {
  background: rgba(30,48,80,0.05);
  color: var(--navy);
  border: 1.5px solid rgba(30,48,80,0.15);
}
[data-theme="light"] .auth-submit:active { background: rgba(30,48,80,0.10); }
/* Lien "Mot de passe oublié ?" */
.auth-forgot-link {
  display: block; margin: -4px 0 12px auto;
  background: none; border: none; cursor: pointer;
  color: var(--navy-light); font-size: 12px; font-weight: 600;
  text-decoration: underline; padding: 2px 0;
  font-family: inherit; transition: opacity 0.15s;
}
.auth-forgot-link:active { opacity: 0.6; }
[data-theme="dark"] .auth-forgot-link { color: rgba(255,255,255,0.6); }

.auth-info { font-size: 12px; color: var(--navy-light); text-align: center; line-height: 1.5; }
.auth-connected { padding: 4px 0 10px; }
.auth-conn-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.auth-conn-left {
  display: flex; align-items: center;
  gap: 10px; flex: 1; min-width: 0;
}
.auth-conn-icon { font-size: 20px; color: var(--gold-main); flex-shrink: 0; }
.auth-connected-email {
  font-size: 13px; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auth-connected-status { font-size: 11px; color: var(--green); }
.auth-sync-btn {
  width: 100%; padding: 10px;
  background: var(--cream); border: 1.5px solid var(--cream-dark);
  border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; color: var(--navy);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.auth-sync-btn i { color: var(--gold-main); }
.auth-logout-btn {
  padding: 8px 12px; flex-shrink: 0;
  background: transparent; border: 1.5px solid #ffcccc;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; color: var(--red); white-space: nowrap;
}

/* ══ MODAL DON ═══════════════════════════════════════════ */
.donation-overlay {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; z-index: 2000;
  padding: max(16px, env(safe-area-inset-top, 16px)) 16px
           max(16px, env(safe-area-inset-bottom, 16px));
}
.donation-overlay.open { display: flex; }
.donation-modal {
  background: var(--bg, #f5f0e8);
  border-radius: 24px; padding: 28px 24px 24px;
  max-width: 360px; width: calc(100% - 32px);
  max-height: calc(100 * var(--vh) - 48px); overflow-y: auto;
  text-align: center; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.donation-close {
  position: absolute; top: 12px; left: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(30,48,80,0.08);
  border: none;
  color: var(--navy-light, #888);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.donation-close:active { background: rgba(30,48,80,0.18); }
[data-theme="dark"] .donation-close { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
[data-theme="dark"] .donation-close:active { background: rgba(255,255,255,0.25); }
.donation-logo {
  width: 72px; height: 72px; border-radius: 18px;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.donation-modal-name {
  font-size: 22px; font-weight: 900;
  color: var(--navy, #1a2744); margin: 0 0 2px;
}
.donation-modal-tagline {
  color: var(--navy-light, #7a8399); font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px;
}
.donation-divider {
  height: 1px; background: rgba(0,0,0,0.08); margin: 0 0 16px;
}
.donation-verse-text {
  font-style: italic; color: var(--navy, #1a2744);
  font-size: 14px; font-weight: 600; margin: 0 0 4px;
}
.donation-verse-ref {
  color: var(--gold-deep, #c89a30); font-weight: 800;
  font-size: 13px; margin: 0 0 16px;
}
.donation-msg {
  color: var(--navy-mid, #556); font-size: 13px;
  line-height: 1.6; margin: 0 0 20px;
}
/* Champ montant */
.donation-amount-row {
  display: flex; align-items: center;
  background: #fff; border: 2px solid #e8dfc8;
  border-radius: 14px; padding: 10px 16px;
  margin-bottom: 16px;
}
.donation-amount-input {
  flex: 1; border: none; background: none;
  font-size: 22px; font-weight: 900;
  color: var(--navy, #1a2744); outline: none;
  min-width: 0;
}
.donation-amount-input::placeholder { color: #ccc; font-weight: 400; font-size: 15px; }
.donation-paypal-btn {
  display: block;
  background: linear-gradient(135deg, var(--gold-deep, #c8962a), var(--amber, #e8a52a)); color: #fff;
  font-weight: 900; font-size: 15px;
  padding: 14px 24px; border-radius: 50px;
  text-decoration: none; margin-bottom: 16px;
  transition: opacity 0.15s;
  box-shadow: 0 4px 12px rgba(255,196,57,0.4);
}
.donation-paypal-btn:active { opacity: 0.85; }
.donation-thanks {
  color: var(--navy-light, #7a8399); font-size: 13px; margin: 0;
}
/* Responsive modal — petits écrans (hauteur réduite / clavier ouvert) */
@media (max-height: 680px) {
  .donation-modal { padding: 20px 20px 16px; }
  .donation-logo  { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 6px; }
  .donation-modal-name    { font-size: 18px; }
  .donation-modal-tagline { margin-bottom: 10px; }
  .donation-divider       { margin-bottom: 10px; }
  .donation-verse-text    { font-size: 13px; }
  .donation-msg           { font-size: 12px; margin-bottom: 14px; }
}

/* ══════════════════════════════════════════
   ÉCRAN — PLAN DE LECTURE (Bible en 1 an)
══════════════════════════════════════════ */
#screen-reading-plan { background: var(--cream); }

/* Jour badge */
.rp-day-badge {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--gold-light); font-size: 13px; font-weight: 800;
  text-align: center; padding: 8px 20px; border-radius: 50px;
  display: inline-block; margin: 0 auto 18px;
  letter-spacing: 0.5px;
}

/* Liste des portions */
.rp-portions-list { margin-bottom: 20px; }
.rp-portion {
  background: white; border-radius: 16px;
  padding: 16px 18px; margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(30,48,80,0.07);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  border-left: 4px solid var(--gold-main);
}
.rp-portion:active { transform: scale(0.98); box-shadow: 0 1px 5px rgba(30,48,80,0.12); }
.rp-portion-info { flex: 1; }
.rp-book-name  { font-size: 16px; font-weight: 800; color: var(--navy); }
.rp-chap-label { font-size: 12px; color: var(--navy-light); margin-top: 3px; }
.rp-open-label { font-size: 11px; color: var(--gold-deep); font-weight: 700; flex-shrink: 0; margin-left: 10px; }

/* Sélecteur de durée : 6 mois / 1 an */
.rp-duration-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.rp-dur-btn {
  flex: 1; padding: 9px 10px; border-radius: 12px;
  border: 1.5px solid var(--cream-dark); background: #fff;
  color: var(--navy); font-size: 12.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rp-dur-btn.active {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--gold-light); border-color: transparent;
}
[data-theme="dark"] .rp-dur-btn { background: #1C2537; color: #fff; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .rp-dur-btn.active { color: var(--gold-light); }

/* Badge de piste (Ancien Testament / Nouveau Testament / Psaume) */
.rp-track-badge {
  display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; margin-bottom: 5px;
}
.rp-badge-ot { background: rgba(30,48,80,0.10); color: var(--navy); }
.rp-badge-nt { background: rgba(200,144,42,0.16); color: var(--gold-deep); }
.rp-badge-ps { background: rgba(80,120,200,0.14); color: #3a63b0; }
.rp-portion.rp-track-ot { border-left-color: var(--navy); }
.rp-portion.rp-track-nt { border-left-color: var(--gold-main); }
.rp-portion.rp-track-ps { border-left-color: #5a7bd0; }
[data-theme="dark"] .rp-badge-ot { background: rgba(255,255,255,0.10); color: #cdd6e6; }
[data-theme="dark"] .rp-badge-ps { color: #9bb4e8; }

/* Barre de progression */
.rp-progress-wrap {
  background: rgba(30,48,80,0.1); border-radius: 50px;
  height: 8px; overflow: hidden; margin-bottom: 8px;
}
.rp-progress-bar {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-main));
  height: 100%; border-radius: 50px;
  transition: width 0.6s ease;
  min-width: 2px;
}
.rp-progress-label {
  text-align: center; font-size: 11px; color: var(--navy-light);
  font-weight: 600; margin-bottom: 24px;
}

/* Responsive desktop */
@media (min-width: 600px) and (min-height: 700px) {
  .rp-portion { padding: 14px 16px; }
  .rp-book-name { font-size: 15px; }
}

/* ══════════════════════════════════════════
   ÉCRAN — PLANS DE PRIÈRE THÉMATIQUE (§10.4)
══════════════════════════════════════════ */
#screen-prayer-plans { background: var(--cream); }
.ppl-body { padding: 16px; padding-bottom: 100px; overflow-y: auto; height: 100%; }

/* Liste des 3 parcours */
.ppl-list { display: flex; flex-direction: column; gap: 14px; }
.ppl-plan-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 16px; display: flex; gap: 12px;
  align-items: flex-start; box-shadow: 0 2px 10px rgba(30,48,80,0.06);
  border-left: 4px solid var(--ppl-color, var(--gold-main));
}
.ppl-plan-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--ppl-color, var(--gold-main)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ppl-plan-info { flex: 1; min-width: 0; }
.ppl-plan-title { font-size: 16px; font-weight: 800; color: var(--navy); }
.ppl-plan-days { font-size: 11px; font-weight: 700; color: var(--ppl-color, var(--gold-deep)); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.ppl-plan-desc { font-size: 12.5px; color: var(--navy-light); margin-top: 6px; line-height: 1.4; }
.ppl-plan-progress-label { font-size: 10.5px; color: var(--navy-light); font-weight: 600; margin-top: 5px; }
.ppl-plan-btn {
  flex-shrink: 0; align-self: center; border: none; border-radius: 50px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 800; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, var(--gold-deep), var(--gold-main));
  cursor: pointer;
}
.ppl-plan-btn:active { transform: scale(0.95); }

/* Barre de progression (réutilisée liste + écran actif) */
.ppl-progress-wrap { background: rgba(30,48,80,0.1); border-radius: 50px; height: 8px; overflow: hidden; margin: 8px 0 4px; }
.ppl-progress-wrap-sm { height: 6px; margin: 8px 0 2px; }
.ppl-progress-bar { background: linear-gradient(90deg, var(--gold-deep), var(--gold-main)); height: 100%; border-radius: 50px; transition: width 0.6s ease; min-width: 2px; }

/* En-tête du parcours actif */
.ppl-active-head {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px; padding: 18px; text-align: center; margin-bottom: 14px;
}
.ppl-active-icon {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 8px;
  background: var(--ppl-color, var(--gold-main)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.ppl-active-title { color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.ppl-active-head .ppl-progress-wrap { background: rgba(255,255,255,0.18); }
.ppl-progress-label { text-align: center; font-size: 11.5px; color: var(--gold-light); font-weight: 700; }

/* Carte du jour courant (+ modal détail réutilise les mêmes classes) */
.ppl-today-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 18px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
.ppl-today-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ppl-today-daybadge {
  display: inline-block; background: rgba(200,144,42,0.14); color: var(--gold-deep);
  font-size: 11.5px; font-weight: 800; padding: 5px 14px; border-radius: 50px;
}
.ppl-share-day-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(30,48,80,0.08); color: var(--navy); font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ppl-share-day-btn:active { transform: scale(0.9); }
[data-theme="dark"] .ppl-share-day-btn { background: rgba(255,255,255,0.1); color: #fff; }
.ppl-day-modal-title.prieres-modal-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
}
.ppl-today-theme-label, .ppl-today-verse-label, .ppl-today-block-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--navy-light); margin-bottom: 3px; margin-top: 14px;
}
.ppl-today-theme-label { margin-top: 0; }
.ppl-today-theme { font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.ppl-today-verse-label { color: var(--gold-deep); display: flex; align-items: center; gap: 5px; }
.ppl-today-verse { font-size: 14px; font-style: italic; color: var(--navy); line-height: 1.5; }
.ppl-today-block-text { font-size: 13.5px; color: var(--navy); line-height: 1.55; }
.ppl-today-decla-label { color: var(--gold-deep); }
.ppl-today-decla-text { font-style: italic; }
.ppl-done-btn {
  width: 100%; margin-top: 18px; border: none; border-radius: 14px;
  padding: 13px; font-size: 14px; font-weight: 800; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, #2a9d6f, #50b896);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.ppl-done-btn:active { transform: scale(0.97); }
.ppl-day-done-badge {
  margin-top: 18px; text-align: center; font-weight: 800; font-size: 13.5px;
  color: #2a9d6f; display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Parcours terminé */
.ppl-alldone-card { text-align: center; }
.ppl-alldone-icon { font-size: 38px; color: var(--gold-main); margin-bottom: 8px; }
.ppl-alldone-title { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.ppl-alldone-msg { font-size: 13px; color: var(--navy-light); line-height: 1.4; }

/* Grille des jours */
.ppl-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.ppl-dot {
  aspect-ratio: 1; border-radius: 10px; border: none; font-size: 12px; font-weight: 800;
  font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ppl-dot-future { background: rgba(30,48,80,0.06); color: var(--navy-light); }
.ppl-dot-current { background: linear-gradient(135deg, var(--gold-deep), var(--gold-main)); color: #fff; box-shadow: 0 2px 8px rgba(212,160,23,0.4); }
.ppl-dot-done { background: rgba(80,184,150,0.18); color: #2a9d6f; }
.ppl-dot:active { transform: scale(0.9); }

/* Rappel quotidien */
.ppl-reminder-row {
  display: flex; align-items: center; gap: 8px; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px;
  color: var(--navy);
}
.ppl-reminder-label { flex: 1; font-size: 13px; font-weight: 700; }
.ppl-reminder-input { border: none; background: none; font-family: inherit; font-size: 13px; color: var(--navy); }

/* Actions (partager / recommencer) + changer de parcours */
.ppl-actions-row { display: flex; gap: 10px; margin-bottom: 12px; }
.ppl-secondary-btn {
  flex: 1; border: 1.5px solid var(--cream-dark); background: var(--card-bg);
  color: var(--navy); border-radius: 12px; padding: 11px 10px; font-size: 12.5px;
  font-weight: 800; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ppl-secondary-btn:active { transform: scale(0.97); }
.ppl-change-link {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--navy-light); font-size: 12.5px; font-weight: 700; font-family: inherit;
  padding: 8px; cursor: pointer; text-decoration: underline;
}
.ppl-day-loading { text-align: center; padding: 24px 0; font-size: 22px; color: var(--gold-main); }

/* Mode sombre */
[data-theme="dark"] .ppl-plan-card,
[data-theme="dark"] .ppl-today-card,
[data-theme="dark"] .ppl-reminder-row { background: #1C2537; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ppl-plan-title,
[data-theme="dark"] .ppl-today-theme,
[data-theme="dark"] .ppl-today-verse,
[data-theme="dark"] .ppl-today-block-text,
[data-theme="dark"] .ppl-alldone-title,
[data-theme="dark"] .ppl-reminder-label,
[data-theme="dark"] .ppl-reminder-input,
[data-theme="dark"] .ppl-secondary-btn { color: #fff; }
[data-theme="dark"] .ppl-plan-desc,
[data-theme="dark"] .ppl-plan-progress-label,
[data-theme="dark"] .ppl-alldone-msg,
[data-theme="dark"] .ppl-change-link { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .ppl-theme-label,
[data-theme="dark"] .ppl-today-theme-label,
[data-theme="dark"] .ppl-today-block-label { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .ppl-dot-future { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
[data-theme="dark"] .ppl-secondary-btn { border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .ppl-progress-wrap { background: rgba(255,255,255,0.1); }

/* ══════════════════════════════════════════
   ADMIN — mode lot Plans de Prière (aperçu + liste publiée)
   Couleurs explicites (pas de var(--navy), fixe et invisible en dark) ──
══════════════════════════════════════════ */
.app-bulk-head { padding: 8px; font-weight: 700; color: var(--navy); }
.app-bulk-row { padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,0.25); color: var(--navy); }
.app-bulk-row-err, .app-bulk-warn { color: #c0392b; }
.app-bulk-empty { padding: 10px; color: #c0392b; }
[data-theme="dark"] .app-bulk-head,
[data-theme="dark"] .app-bulk-row { color: rgba(255,255,255,0.88); }
[data-theme="dark"] .app-bulk-row-err,
[data-theme="dark"] .app-bulk-warn,
[data-theme="dark"] .app-bulk-empty { color: #ff8a80; }

.app-plan-row-title { color: var(--navy); font-weight: 800; }
.app-plan-row-sub { color: var(--navy-light); font-size: 12px; }
.app-plan-row-empty, .app-plan-row-error { padding: 14px; color: var(--navy-light); }
[data-theme="dark"] .app-plan-row-title { color: #fff; }
[data-theme="dark"] .app-plan-row-sub,
[data-theme="dark"] .app-plan-row-empty { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .app-plan-row-error { color: #ff8a80; }

/* ══════════════════════════════════════════
   ÉCRAN — VERSETS À MÉMORISER (§10.5)
══════════════════════════════════════════ */
#screen-verse-memory, #screen-verse-review { background: var(--cream); }
.vm-body { padding: 16px; padding-bottom: 100px; overflow-y: auto; height: 100%; }

.vm-empty { text-align: center; padding: 60px 20px; }
.vm-empty-icon { font-size: 42px; color: var(--gold-main); margin-bottom: 12px; }
.vm-empty-title { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.vm-empty-msg { font-size: 13px; color: var(--navy-light); line-height: 1.5; margin-bottom: 20px; }
.vm-goto-bible-btn {
  border: none; border-radius: 50px; padding: 11px 24px; font-size: 13px; font-weight: 800;
  font-family: inherit; color: #fff; background: linear-gradient(135deg, var(--gold-deep), var(--gold-main));
  cursor: pointer;
}
[data-theme="dark"] .vm-empty-title { color: #fff; }
[data-theme="dark"] .vm-empty-msg { color: rgba(255,255,255,0.5); }

.vm-stats-bar {
  display: flex; align-items: center; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 16px; padding: 14px 0; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
.vm-stat { text-align: center; flex: 1; }
.vm-stat-num { font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1; }
.vm-stat-gold { color: #d4a017; }
.vm-stat-lbl { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.vm-stat-divider { width: 1px; height: 36px; background: #ede8df; }
[data-theme="dark"] .vm-stat-num { color: #fff; }
[data-theme="dark"] .vm-stat-divider { background: rgba(255,255,255,0.12); }

.vm-actions-row { display: flex; gap: 10px; margin-bottom: 14px; }
.vm-action-btn {
  flex: 1; border: none; border-radius: 14px; padding: 13px 10px; font-size: 13px; font-weight: 800;
  font-family: inherit; color: #fff; background: linear-gradient(135deg, var(--gold-deep), var(--gold-main));
  display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
}
.vm-action-btn-alt { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); }
.vm-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vm-action-btn:active:not(:disabled) { transform: scale(0.97); }

.vm-reminder-row {
  display: flex; align-items: center; gap: 8px; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 14px; padding: 10px 14px; margin-bottom: 16px;
  color: var(--navy);
}
.vm-reminder-label { flex: 1; font-size: 13px; font-weight: 700; }
.vm-reminder-input { border: none; background: none; font-family: inherit; font-size: 13px; color: var(--navy); }
[data-theme="dark"] .vm-reminder-row { background: #1C2537; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .vm-reminder-label, [data-theme="dark"] .vm-reminder-input { color: #fff; }

.vm-card-list { display: flex; flex-direction: column; gap: 8px; }
.vm-card-row {
  display: flex; align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 12px 14px;
}
.vm-card-info { flex: 1; min-width: 0; }
.vm-card-ref { font-size: 14px; font-weight: 800; color: var(--navy); }
.vm-card-meta { font-size: 11.5px; color: var(--navy-light); margin-top: 2px; }
.vm-card-del { border: none; background: rgba(200,80,80,0.1); color: #c0392b; border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; cursor: pointer; }
[data-theme="dark"] .vm-card-row { background: #1C2537; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .vm-card-ref { color: #fff; }
[data-theme="dark"] .vm-card-meta { color: rgba(255,255,255,0.5); }

/* Révision — flashcard (retournement) */
.vr-progress-label { text-align: center; font-size: 12px; color: var(--navy-light); font-weight: 700; margin-bottom: 14px; }
[data-theme="dark"] .vr-progress-label { color: rgba(255,255,255,0.5); }
.vr-flashcard {
  position: relative; min-height: 220px; border-radius: 20px; cursor: pointer;
  perspective: 1200px; margin-bottom: 18px;
}
.vr-flashcard-face {
  position: absolute; inset: 0; border-radius: 20px; padding: 28px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  backface-visibility: hidden; transition: transform 0.5s; box-shadow: 0 4px 18px rgba(30,48,80,0.1);
}
.vr-flashcard-front { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); }
.vr-flashcard-back { background: var(--card-bg); border: 1px solid var(--card-border); transform: rotateY(180deg); }
.vr-flashcard.vr-flipped .vr-flashcard-front { transform: rotateY(180deg); }
.vr-flashcard.vr-flipped .vr-flashcard-back { transform: rotateY(0deg); }
.vr-flashcard-hint { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.vr-flashcard-ref { font-size: 22px; font-weight: 900; color: #fff; }
.vr-flashcard-ref-small { font-size: 12px; font-weight: 800; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.vr-flashcard-text { font-size: 16px; font-style: italic; color: var(--navy); line-height: 1.5; }
[data-theme="dark"] .vr-flashcard-text { color: #fff; }

.vr-answer-row { display: flex; gap: 10px; }
.vr-answer-btn {
  flex: 1; border: none; border-radius: 14px; padding: 13px 10px; font-size: 13px; font-weight: 800;
  font-family: inherit; color: #fff; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
}
.vr-answer-no { background: linear-gradient(135deg, #c0392b, #e0685c); }
.vr-answer-yes { background: linear-gradient(135deg, #2a9d6f, #50b896); }
.vr-answer-btn:active { transform: scale(0.97); }

/* Révision — test à trous */
.vr-blank-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px;
  padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
.vr-blank-text { font-size: 15px; color: var(--navy); line-height: 1.7; }
[data-theme="dark"] .vr-blank-text { color: #fff; }
.vr-blank-slot { display: inline-block; min-width: 46px; border-bottom: 2px solid var(--gold-main); color: transparent; }
.vr-blank-inputs { display: flex; flex-direction: column; gap: 8px; }
.vr-blank-input-row { display: flex; align-items: center; gap: 10px; }
.vr-blank-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold-main); color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vr-blank-input {
  flex: 1; border: 1.5px solid var(--cream-dark); border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: 13px; color: var(--navy); background: var(--card-bg);
}
[data-theme="dark"] .vr-blank-input { background: #1C2537; border-color: rgba(255,255,255,0.12); color: #fff; }
.vr-blank-score { text-align: center; font-weight: 800; font-size: 15px; padding: 10px; border-radius: 12px; }
.vr-blank-score-ok { background: rgba(80,184,150,0.15); color: #2a9d6f; }
.vr-blank-score-ko { background: rgba(224,104,92,0.15); color: #c0392b; }
.vr-blank-attempts-left { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--navy-light); margin-top: 6px; }
.vr-blank-reveal { font-size: 12.5px; color: var(--navy); background: rgba(200,144,42,0.1); border-radius: 10px; padding: 10px 12px; margin-top: 8px; line-height: 1.5; }
[data-theme="dark"] .vr-blank-attempts-left { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .vr-blank-reveal { color: #fff; background: rgba(255,255,255,0.08); }

/* ══════════════════════════════════════════
   ÉCRAN — QUIZ BIBLIQUE
══════════════════════════════════════════ */
#screen-quiz, #screen-quiz-play { background: var(--cream); }
.quiz-intro { text-align: center; font-size: 12.5px; color: var(--navy-light); margin-bottom: 16px; line-height: 1.5; }
[data-theme="dark"] .quiz-intro { color: rgba(255,255,255,0.5); }

.quiz-level-list { display: flex; flex-direction: column; gap: 10px; }
/* La tuile de niveau est la forme de référence de tout l'écran Quiz : le Défi
   et les cartes de section reprennent cette coquille, à leur couleur près.
   Le liseré gauche de 4 px est ce qui porte cette couleur — il reste visible
   quand la pastille passe au gris d'un niveau verrouillé. */
.quiz-level-tile {
  display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border);
  border-left: 4px solid var(--card-border);
  border-radius: 16px; padding: 14px 16px; cursor: pointer; box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
.quiz-level-tile:active { transform: scale(0.98); }
.quiz-level-locked { opacity: 0.55; cursor: not-allowed; }
.quiz-level-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold-main));
  display: flex; align-items: center; justify-content: center;
}
/* Vert, ambre, rouge : la difficulté se lit avant même le libellé. */
.quiz-level-facile    { border-left-color: var(--q-facile); }
.quiz-level-moyen     { border-left-color: var(--q-moyen); }
.quiz-level-difficile { border-left-color: var(--q-difficile); }
.quiz-level-facile .quiz-level-icon {
  background: linear-gradient(135deg, var(--q-facile-deep), var(--q-facile));
}
.quiz-level-moyen .quiz-level-icon {
  background: linear-gradient(135deg, var(--q-moyen-deep), var(--q-moyen));
}
.quiz-level-difficile .quiz-level-icon {
  background: linear-gradient(135deg, var(--q-difficile-deep), var(--q-difficile));
}
/* Verrouillé : seule la PASTILLE passe au gris. Le liseré garde sa couleur,
   sinon les trois niveaux à venir seraient indiscernables et l'échelle ne se
   découvrirait qu'au fur et à mesure des déblocages. */
.quiz-level-locked .quiz-level-icon { background: linear-gradient(135deg, #9aa5b5, #7d879a); }
.quiz-level-info { flex: 1; min-width: 0; }
.quiz-level-title { font-size: 15px; font-weight: 800; color: var(--navy); }
.quiz-level-sub { font-size: 12px; color: var(--navy-light); margin-top: 2px; }
.quiz-level-arrow { font-size: 22px; color: var(--navy-light); flex-shrink: 0; }
[data-theme="dark"] .quiz-level-title { color: #fff; }
[data-theme="dark"] .quiz-level-sub { color: rgba(255,255,255,0.5); }

/* Manche en cours */
.quiz-progress-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--navy-light); margin-bottom: 14px; }
[data-theme="dark"] .quiz-progress-row { color: rgba(255,255,255,0.5); }
.quiz-question-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)); color: #fff; border-radius: 18px;
  padding: 22px 20px; font-size: 17px; font-weight: 800; line-height: 1.4; margin-bottom: 18px;
  box-shadow: 0 4px 18px rgba(30,48,80,0.15);
}
.quiz-choice-list { display: flex; flex-direction: column; gap: 10px; }
.quiz-choice-btn {
  display: block; width: 100%; text-align: left; border: 1.5px solid var(--card-border); background: var(--card-bg);
  color: var(--navy); border-radius: 14px; padding: 14px 16px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.quiz-choice-btn:active:not(.quiz-choice-disabled) { transform: scale(0.98); }
.quiz-choice-disabled { cursor: default; pointer-events: none; }
.quiz-choice-correct { background: rgba(80,184,150,0.18) !important; border-color: #2a9d6f !important; color: #1e7a52 !important; }
.quiz-choice-wrong { background: rgba(224,104,92,0.18) !important; border-color: #c0392b !important; color: #a93224 !important; }
[data-theme="dark"] .quiz-choice-btn { background: #1C2537; border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .quiz-choice-correct { color: #7bd8b2 !important; }
[data-theme="dark"] .quiz-choice-wrong { color: #f0a89e !important; }

.quiz-explain-box { border-radius: 14px; padding: 16px; margin-top: 16px; }
.quiz-explain-ok { background: rgba(80,184,150,0.14); }
.quiz-explain-ko { background: rgba(224,104,92,0.14); }
.quiz-explain-title { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.quiz-explain-text { font-size: 13.5px; color: var(--navy); line-height: 1.55; }
.quiz-explain-ref { font-size: 12px; font-weight: 700; color: var(--gold-deep); margin-top: 8px; }
[data-theme="dark"] .quiz-explain-title, [data-theme="dark"] .quiz-explain-text { color: #fff; }
.quiz-next-btn {
  width: 100%; margin-top: 14px; border: none; border-radius: 14px; padding: 14px;
  font-size: 14px; font-weight: 800; font-family: inherit; color: #fff;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold-main)); cursor: pointer;
}
.quiz-next-btn:active { transform: scale(0.97); }

/* Résultats de fin de manche */
.quiz-result-card { text-align: center; padding: 40px 20px; }
.quiz-result-icon { font-size: 46px; color: var(--gold-main); margin-bottom: 14px; }
.quiz-result-title { font-size: 18px; font-weight: 900; color: var(--navy); margin-bottom: 8px; }
.quiz-result-score { font-size: 15px; font-weight: 700; color: var(--navy-light); }
.quiz-result-unlock { margin-top: 14px; font-size: 13px; font-weight: 800; color: #1e7a52; background: rgba(80,184,150,0.15); border-radius: 12px; padding: 10px 14px; display: inline-block; }
.quiz-result-cycle { margin-top: 14px; font-size: 13px; font-weight: 800; color: #9a6a00; background: rgba(240,160,64,0.16); border-radius: 12px; padding: 10px 14px; display: inline-block; }
.quiz-result-progress { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--navy-light); }
[data-theme="dark"] .quiz-result-cycle { color: #f0b95c; background: rgba(240,160,64,0.14); }
[data-theme="dark"] .quiz-result-progress { color: rgba(255,255,255,0.5); }

/* Trophée — manche parfaite (10/10) */
.quiz-result-trophy {
  margin-top: 14px; font-size: 14px; font-weight: 900;
  color: #a9781a; background: linear-gradient(135deg, rgba(240,176,64,0.22), rgba(212,132,90,0.18));
  border: 1px solid rgba(212,160,23,0.35); border-radius: 14px; padding: 12px 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.quiz-result-trophy .bi-trophy-fill { color: var(--gold-main, #d4a017); font-size: 18px; }
.quiz-trophy-count { font-weight: 900; }
.quiz-result-perfect .quiz-result-icon { color: var(--gold-main, #d4a017); animation: quiz-trophy-pop 0.5s ease; }
@keyframes quiz-trophy-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.quiz-level-trophy { margin-left: 8px; font-size: 12px; font-weight: 900; color: var(--gold-main, #d4a017); white-space: nowrap; }
.quiz-level-trophy .bi-trophy-fill { font-size: 13px; }
[data-theme="dark"] .quiz-result-trophy { color: #f0c060; border-color: rgba(240,176,64,0.3); }
/* Chargement (traduction de la manche en parallèle) */
.quiz-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px 20px; }
.quiz-spin { width: 38px; height: 38px; border: 3px solid rgba(30,48,80,0.15); border-top-color: var(--gold-main, #d4a017); border-radius: 50%; animation: quiz-spin 0.8s linear infinite; }
.quiz-loading-text { font-size: 13px; font-weight: 700; color: var(--navy-light); }
[data-theme="dark"] .quiz-spin { border-color: rgba(255,255,255,0.15); border-top-color: var(--gold-main, #d4a017); }
[data-theme="dark"] .quiz-loading-text { color: rgba(255,255,255,0.6); }
@keyframes quiz-spin { to { transform: rotate(360deg); } }

/* ══ Mode Défi — carte d'accès, chrono, classement ══
   La carte reprend la coquille .quiz-level-tile, comme les sections : elle
   était seule à porter un fond bleu nuit plein, deux fois plus haute et d'un
   autre rayon que ses voisines. Le violet la distingue désormais, porté par sa
   pastille et son liseré : le vert/ambre/rouge appartient aux difficultés et
   le doré aux sections, il fallait au Défi une teinte qui n'entre en concurrence
   avec ni l'un ni l'autre. */
.quiz-defi-card { border-left-color: var(--purple); margin-bottom: 4px; }
.quiz-defi-card .quiz-level-icon {
  background: linear-gradient(135deg, #6a4f92, var(--purple));
}
/* Le champion se lit désormais sur une carte claire : le doré clair d'avant
   n'y tiendrait pas (1,9:1). Le doré profond y atteint 4,6:1. */
.quiz-defi-champ {
  font-size: 12px; font-weight: 800; color: var(--gold-deep); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quiz-defi-champ-empty { color: var(--navy-light); font-weight: 700; }
[data-theme="dark"] .quiz-defi-champ { color: var(--gold-light); }
[data-theme="dark"] .quiz-defi-champ-empty { color: rgba(255,255,255,0.55); }
/* En thème sombre, le violet de la palette tombe à 2,92:1 sur la carte —
   sous le seuil de 3:1 d'un repère non textuel, là où le doré des sections
   voisines atteint 7,16:1. Un ton plus clair le remet à 3,77:1 sans quitter
   la teinte. */
[data-theme="dark"] .quiz-defi-card { border-left-color: #8e6fbd; }
[data-theme="dark"] .quiz-defi-card .quiz-level-icon {
  background: linear-gradient(135deg, var(--purple), #8e6fbd);
}

/* ── Sections thématiques du quiz (Histoire biblique…) ─────────
   Une section se joue à part : même vocabulaire visuel que les tuiles de
   niveau, teinte dorée pour la distinguer du Défi (bleu nuit). */
.quiz-sections-title {
  font-size: 12px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--navy-light); margin: 22px 0 10px;
}
[data-theme="dark"] .quiz-sections-title { color: rgba(255,255,255,0.55); }
.quiz-theme-card {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-left: 4px solid var(--gold-main, #d4a017);
  border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
.quiz-theme-card:active { transform: scale(0.98); }
.quiz-theme-cardicon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; font-size: 20px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-deep, #a9781a), var(--gold-main, #d4a017));
}
.quiz-theme-cardinfo { flex: 1; min-width: 0; }
.quiz-theme-cardtitle { font-size: 15px; font-weight: 800; color: var(--navy, #1e3050); }
[data-theme="dark"] .quiz-theme-cardtitle { color: #fff; }
.quiz-theme-cardsub { font-size: 12px; color: var(--navy-light); margin-top: 2px; }
.quiz-theme-cardmeta { font-size: 11px; font-weight: 800; color: var(--gold-deep, #a9781a); margin-top: 4px; }
[data-theme="dark"] .quiz-theme-cardsub { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .quiz-theme-cardmeta { color: var(--gold-main, #d4a017); }
.quiz-theme-cardarrow { color: var(--navy-light); font-size: 22px; flex-shrink: 0; }

/* La section générale portait le bleu nuit, pour la distinguer des sections
   thématiques dorées. Ce bleu a fait doublon dès que le Défi a rejoint la
   forme commune : deux cartes voisines l'arboraient pour des rôles opposés,
   un mode chronométré et une section de questions.
   La lecture est donc redistribuée : le VIOLET ne désigne que le Défi, et les
   trois sections forment une famille dorée, séparées du mode par l'intitulé
   « Sections ». La générale n'a plus AUCUNE règle propre — son icône de livre
   et son sous-titre suffisent à la distinguer de ses deux voisines. */

/* En-tête du hub d'une section */
.quiz-theme-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  background: none; border: none; padding: 4px 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 800; color: var(--navy-light);
}
[data-theme="dark"] .quiz-theme-back { color: rgba(255,255,255,0.65); }
.quiz-theme-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quiz-theme-headicon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; font-size: 22px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-deep, #a9781a), var(--gold-main, #d4a017));
}
.quiz-theme-headtitle { font-size: 18px; font-weight: 900; color: var(--navy, #1e3050); }
[data-theme="dark"] .quiz-theme-headtitle { color: #fff; }
.quiz-theme-headsub { font-size: 11.5px; color: var(--navy-light); margin-top: 2px; }
[data-theme="dark"] .quiz-theme-headsub { color: rgba(255,255,255,0.55); }

/* Chrono pendant la manche Défi */
.quiz-progress-timer { font-size: 13px; font-weight: 800; color: var(--gold-deep, #a9781a); display: inline-flex; align-items: center; gap: 5px; }
[data-theme="dark"] .quiz-progress-timer { color: var(--gold-main, #d4a017); }

/* Ligne score + temps sur l'écran de résultats du Défi */
.quiz-defi-scoreline { display: flex; justify-content: center; gap: 32px; margin: 8px 0 4px; }
.quiz-defi-stat { display: flex; flex-direction: column; align-items: center; }
.quiz-defi-statn { font-size: 24px; font-weight: 900; color: var(--navy, #1e3050); }
.quiz-defi-statl { font-size: 11px; font-weight: 700; color: var(--navy-light); text-transform: uppercase; letter-spacing: 0.5px; }
[data-theme="dark"] .quiz-defi-statn { color: #fff; }

/* Saisie du prénom pour le classement */
.quiz-defi-namebox { margin: 16px 0 4px; }
.quiz-defi-namelabel { font-size: 12px; font-weight: 700; color: var(--navy-light); margin-bottom: 8px; }
.quiz-defi-namerow { display: flex; gap: 8px; }
.quiz-defi-nameinput {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: 12px; font-size: 14px; font-family: inherit;
  border: 1px solid rgba(30,48,80,0.18); background: #fff; color: var(--navy, #1e3050);
}
.quiz-defi-namebtn {
  flex-shrink: 0; padding: 11px 18px; border: none; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--gold-deep, #a9781a), var(--gold-main, #d4a017));
}
.quiz-defi-namebtn:active { transform: scale(0.95); }
[data-theme="dark"] .quiz-defi-nameinput { background: #1C2537; color: #fff; border-color: rgba(255,255,255,0.15); }

/* Classement Top 10 */
.quiz-lb { margin: 18px 0 4px; text-align: left; }
.quiz-lb-title { font-size: 13px; font-weight: 900; color: var(--navy, #1e3050); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
[data-theme="dark"] .quiz-lb-title { color: #fff; }
.quiz-lb-list { display: flex; flex-direction: column; gap: 4px; }
.quiz-lb-row {
  display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 11px; background: rgba(30,48,80,0.04); font-size: 13px;
}
.quiz-lb-me { background: rgba(212,160,23,0.16); box-shadow: inset 0 0 0 1px rgba(212,160,23,0.4); }
.quiz-lb-rank { font-size: 14px; font-weight: 900; text-align: center; color: var(--navy-light); }
.quiz-lb-name { font-weight: 700; color: var(--navy, #1e3050); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-lb-you { font-size: 10px; font-weight: 800; color: var(--gold-deep, #a9781a); }
.quiz-lb-score { font-weight: 900; color: var(--navy, #1e3050); }
.quiz-lb-time { font-variant-numeric: tabular-nums; color: var(--navy-light); font-size: 12px; }
.quiz-lb-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--navy-light); }
[data-theme="dark"] .quiz-lb-row { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .quiz-lb-name, [data-theme="dark"] .quiz-lb-score { color: #fff; }
[data-theme="dark"] .quiz-lb-me { background: rgba(212,160,23,0.14); }

.quiz-result-actions { display: flex; gap: 10px; margin-top: 24px; }
.quiz-result-btn {
  flex: 1; border: none; border-radius: 14px; padding: 13px 10px; font-size: 13px; font-weight: 800;
  font-family: inherit; color: #fff; background: linear-gradient(135deg, var(--gold-deep), var(--gold-main)); cursor: pointer;
}
.quiz-result-btn-alt { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); }
.quiz-result-btn:active { transform: scale(0.97); }
[data-theme="dark"] .quiz-result-title { color: #fff; }
[data-theme="dark"] .quiz-result-score { color: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════
   ÉCRAN — CARTOGRAPHIE DE L'INTERCESSION (§10.6)
══════════════════════════════════════════ */
#screen-intercession-map { background: var(--cream); }
.im-body { padding: 16px; padding-bottom: 100px; overflow-y: auto; height: 100%; }
.im-intro { text-align: center; font-size: 12.5px; color: var(--navy-light); margin-bottom: 12px; }
[data-theme="dark"] .im-intro { color: rgba(255,255,255,0.5); }

.im-map-wrap {
  background: linear-gradient(135deg, #dcecff 0%, #eef6ff 100%); border-radius: 20px;
  padding: 10px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(30,48,80,0.08);
}
[data-theme="dark"] .im-map-wrap { background: linear-gradient(135deg, #16233a 0%, #1C2537 100%); }
.im-map-svg { width: 100%; height: auto; display: block; }
.im-land { fill: rgba(80,120,200,0.18); }
[data-theme="dark"] .im-land { fill: rgba(255,255,255,0.10); }
.im-pin { cursor: pointer; }
.im-pin-halo { fill: rgba(232,130,26,0.25); animation: imPinPulse 2.2s ease-in-out infinite; transform-origin: center; }
.im-pin-dot { fill: var(--gold-deep, #c8962a); stroke: #fff; stroke-width: 1.5; }
[data-theme="dark"] .im-pin-dot { stroke: #1C2537; }
.im-pin-flag { font-size: 15px; }
@keyframes imPinPulse { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.35); opacity: 0.15; } }

.im-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.im-legend-chip {
  border: 1.5px solid var(--cream-dark); background: var(--card-bg); color: var(--navy);
  border-radius: 50px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.im-legend-chip:active { transform: scale(0.95); }
[data-theme="dark"] .im-legend-chip { background: #1C2537; border-color: rgba(255,255,255,0.12); color: #fff; }

/* Fiche nation (partage les classes .prieres-modal-bg / .prieres-modal) */
.im-sheet-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--navy-light); margin: 14px 0 4px;
}
.im-sheet-text { font-size: 13.5px; color: var(--navy); line-height: 1.55; }
.im-sheet-points { margin: 4px 0 0 18px; padding: 0; font-size: 13.5px; color: var(--navy); line-height: 1.7; }
.im-sheet-verse-label { font-size: 11.5px; font-weight: 800; color: var(--gold-deep); margin-top: 14px; display: flex; align-items: center; gap: 5px; }
.im-sheet-verse { font-size: 14px; font-style: italic; color: var(--navy); line-height: 1.5; margin-top: 3px; }
.im-sheet-counter {
  display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700;
  color: var(--gold-deep);
}
.im-pray-btn {
  width: 100%; margin-top: 14px; border: none; border-radius: 14px; padding: 13px;
  font-size: 14px; font-weight: 800; font-family: inherit; color: #fff;
  background: linear-gradient(135deg, #2a9d6f, #50b896);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.im-pray-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.im-pray-btn:active:not(:disabled) { transform: scale(0.97); }
[data-theme="dark"] .im-sheet-text, [data-theme="dark"] .im-sheet-points, [data-theme="dark"] .im-sheet-verse { color: #fff; }
[data-theme="dark"] .im-sheet-label { color: rgba(255,255,255,0.45); }

/* Admin — sélecteur de nations */
.aim-nation-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aim-nation-chip {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--cream-dark, #e8e4dc);
  background: #fff; border-radius: 50px; padding: 8px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; color: var(--navy, #1a2744);
}
.aim-nation-chip-active { background: linear-gradient(135deg, var(--navy, #1a2744), var(--navy-mid, #2a4a6a)); color: #fff; border-color: transparent; }
.aim-nation-chip-count { font-size: 11px; opacity: 0.75; }
.aim-nation-chip-hidden { opacity: 0.45; }
.aim-nation-chip-add { border-style: dashed; color: var(--gold-deep); font-weight: 800; }
[data-theme="dark"] .aim-nation-chip { background: #1C2537; border-color: rgba(255,255,255,0.12); color: #fff; }

/* Aperçu de carte cliquable (ajout d'une nouvelle nation) */
.aim-map-svg { cursor: crosshair; }
.aim-marker-label { font-size: 11.5px; color: var(--navy-light); margin-top: 6px; text-align: center; }
[data-theme="dark"] .aim-marker-label { color: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════
   TOGGLE THÈME (bouton profil)
══════════════════════════════════════════ */
.psr-divider { height: 1px; background: rgba(30,48,80,0.08); margin: 0 12px; }
.psr-theme-row { cursor: pointer; }
.theme-toggle {
  width: 48px; height: 26px; border-radius: 13px;
  background: var(--navy-mid); position: relative;
  transition: background 0.3s; flex-shrink: 0; cursor: pointer;
  border: none; outline: none;
}
.theme-toggle.light-on { background: var(--gold-main); }
.theme-toggle-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  position: absolute; top: 3px; left: 3px;
  transition: transform 0.3s; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.theme-toggle.light-on .theme-toggle-thumb { transform: translateX(22px); }

/* Contrôle Taille du texte (zoom global) dans le profil */
.psr-textsize-row { cursor: default; }
.psr-textsize-row:active { background: none; }
.textsize-ctrl { display: flex; gap: 8px; flex-shrink: 0; }
.textsize-btn {
  width: 38px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(30,48,80,0.15); background: none;
  font-size: 13px; font-weight: 800; color: var(--navy);
  cursor: pointer; transition: all 0.15s; line-height: 1;
}
.textsize-btn:active:not(:disabled) { background: var(--navy); color: #fff; transform: scale(0.94); }
.textsize-btn:disabled { opacity: 0.35; cursor: default; }
[data-theme="dark"] .textsize-btn { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .textsize-btn:active:not(:disabled) { background: rgba(255,255,255,0.12); color: #fff; }

/* ══════════════════════════════════════════
   MODE SOMBRE (data-theme="dark")
   Appliqué sur .phone-frame
══════════════════════════════════════════ */
[data-theme="dark"] {
  --cream:            #111827;
  --cream-dark:       #1C2537;
  --card-bg:          #1C2537;
  --card-border:      rgba(255,255,255,0.07);
  --section-label:    #ffffff;
  --section-arrow:    rgba(255,255,255,0.45);
  --section-body-txt: rgba(255,255,255,0.65);
  --section-body-str: rgba(255,255,255,0.92);
}
body:has(.phone-frame[data-theme="dark"]),
[data-theme="dark"].phone-frame { background: #111827; }
/* Desktop/tablette : fond de page violet radial derrière la maquette
   téléphone (mode sombre). Placé après la règle #111827 ci-dessus pour la
   surcharger sur grand écran. En mobile plein écran on garde #111827
   (identique au contenu → pas de bord visible derrière le cadre). */
@media (min-width: 600px) and (min-height: 700px) {
  body:has(.phone-frame[data-theme="dark"]) {
    background: radial-gradient(125% 90% at 50% 12%, #251c40 0%, #0b0914 58%);
  }
}

/* Écrans généraux */
[data-theme="dark"] .screen { background: #111827; }
[data-theme="dark"] .screen-body { background: #111827; }

/* Navigation basse */
[data-theme="dark"] .bottom-nav {
  background: rgba(10,18,32,0.97);
  border-top: none;
}
[data-theme="dark"] .nav-btn { color: rgba(255,255,255,0.38); }
[data-theme="dark"] .nav-btn.active { color: var(--gold-main); }
[data-theme="dark"] .nav-btn.active-gold { color: var(--gold-light); }
[data-theme="dark"] .nav-btn.active::before { background: var(--gold-main); }
[data-theme="dark"] .nav-btn.active-gold::before { background: var(--gold-light); }

/* Formulaire Questions */
[data-theme="dark"] .q-card {
  background: #1C2537;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .q-label { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .q-input {
  background: #111827;
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
[data-theme="dark"] .q-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .q-info p { color: rgba(255,255,255,0.5); }

/* Livres */
/* La carte (#1C2537) sur le fond (#111827) donnait un contraste de 1.16, sans
   bordure et avec une ombre navy invisible sur du noir : le bloc se fondait
   dans la page. On éclaircit la carte et on la cerne d'un filet clair — c'est
   le filet qui détache aussi la couverture, souvent sombre elle aussi. */
[data-theme="dark"] .book-card {
  background: #2A3752;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 22px rgba(0,0,0,0.55);
}
[data-theme="dark"] .book-card-title  { color: #fff; }
/* 0.62 et non 0.5 : la carte éclaircie ci-dessus faisait tomber ce texte à
   4.26:1, sous le seuil AA de 4.5. */
[data-theme="dark"] .book-card-author { color: rgba(255,255,255,0.62); }
[data-theme="dark"] .books-body { background: #111827; }
[data-theme="dark"] .books-pager-btn {
  background: #1C2537; color: #fff;
  border-color: rgba(255,255,255,0.14);
}
[data-theme="dark"] .books-pager-btn:active:not(:disabled) { background: #26314a; }
[data-theme="dark"] .books-pager-count { color: rgba(255,255,255,0.6); }

/* Profil */
[data-theme="dark"] .profil-body { background: #111827; }
[data-theme="dark"] .profil-settings-card,
[data-theme="dark"] .profil-stat-card,
[data-theme="dark"] .profil-auth-card {
  background: #1C2537;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
[data-theme="dark"] .psr-title   { color: #fff; }
[data-theme="dark"] .psr-sub     { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .psr-icon    { background: rgba(255,255,255,0.08); color: var(--gold-light); }
[data-theme="dark"] .psr-chevron { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .psr-divider { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .profil-stat-n   { color: var(--gold-light); }
[data-theme="dark"] .profil-stat-icon { color: var(--gold-light); }
[data-theme="dark"] .profil-stat-l   { color: #fff; }
[data-theme="dark"] .profil-stat-sub { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .psr-lang-expand { background: #111827; }
[data-theme="dark"] .psr-lang-btn    { background: #1C2537; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .psr-lang-btn.active { background: var(--navy); border-color: var(--gold-main); color: var(--gold-light); }

/* Communauté */
[data-theme="dark"] .communaute-body { background: #111827; }
[data-theme="dark"] .communaute-feature { background: #1C2537; box-shadow: none; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .cf-card    { background: #1C2537; box-shadow: none; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .cf-title   { color: #fff; }
[data-theme="dark"] .cf-sub     { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .cf-chevron { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .communaute-cta-label { color: #fff; }
[data-theme="dark"] .communaute-cta-sub   { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .contact-btn-email    { background: linear-gradient(135deg, #2a4a6a, #1e3050); }
[data-theme="dark"] .communaute-verse-block { background: #1C2537; }
[data-theme="dark"] .communaute-verse-text  { color: rgba(255,255,255,0.78); }
[data-theme="dark"] .communaute-section-label { color: rgba(255,255,255,0.45); }

/* Notifications */
[data-theme="dark"] .notif-modal-sheet { background: #1C2537; }
[data-theme="dark"] .notif-row         { background: transparent; }
[data-theme="dark"] .notif-row-title   { color: #fff; }
[data-theme="dark"] .notif-row-sub     { color: rgba(255,255,255,0.5); }

/* Nations modal */
[data-theme="dark"] .nations-modal-sheet { background: #1C2537; }
[data-theme="dark"] .nations-input { background: #111827; border-color: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] .nations-input::placeholder { color: rgba(255,255,255,0.3); }

/* ════════════════════════════════════════════════════════════
   9 NATIONS — pleine page style « Événements » (header + cartes + footer)
════════════════════════════════════════════════════════════ */
.nations-modal-sheet.nations-page {
  background: var(--cream) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  transform: none !important;          /* pas d'animation bottom-sheet */
}
.nations-page .nations-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 16px 18px;
}
/* Sections = cartes blanches (comme la carte d'Événements) */
.nations-page .nations-section {
  background: white;
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 4px 18px rgba(30,48,80,0.07);
  margin-bottom: 16px;
}
.nations-page .nations-section-h3  { color: var(--navy); }
.nations-page .nations-section-sub { color: var(--navy-light); }
.nations-page .nations-input {
  background: #f6f8fb;
  border: 1.5px solid #e8ecf2;
  color: var(--navy);
}
.nations-page .nations-input::placeholder { color: #9aa7bd; }

/* Dark mode */
[data-theme="dark"] .nations-modal-sheet.nations-page { background: #111827 !important; }
[data-theme="dark"] .nations-page .nations-section { background: #1C2537; box-shadow: none; }
[data-theme="dark"] .nations-page .nations-section-h3  { color: var(--gold-light); }
[data-theme="dark"] .nations-page .nations-section-sub { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .nations-page .nations-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
[data-theme="dark"] .nations-page .nations-input::placeholder { color: rgba(255,255,255,0.4); }

/* Auth — screen (light) */
#screen-auth {
  background: linear-gradient(180deg, #1a3a7a 0%, rgba(212,132,90,0.3) 20%, var(--cream) 42%, var(--cream) 100%);
}
/* Auth — screen (dark) already in gradient list above */
[data-theme="dark"] .auth-close { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
[data-theme="dark"] .auth-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] .auth-tabs  { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .auth-tab.active { background: rgba(255,255,255,0.15); color: #fff; }
[data-theme="dark"] .auth-tab   { color: rgba(255,255,255,0.5); }

/* Événements modal */
[data-theme="dark"] .evenements-sheet { background: #1C2537; }
[data-theme="dark"] .event-card { background: #111827; }
[data-theme="dark"] .event-title { color: #fff; }
[data-theme="dark"] .event-desc  { color: rgba(255,255,255,0.6); }

/* Toast */
[data-theme="dark"] .toast-msg { background: #1C2537; }

/* ─── Accueil (Home) ─────────────────────────────── */
[data-theme="dark"] #screen-home          { background: #111827; }
[data-theme="dark"] .greeting-text        { color: #fff; }
/* home-faith-cta uses navy gradient in both themes — no dark override needed */
[data-theme="dark"] .home-date            { color: rgba(255,255,255,0.55); }

/* ─── Plus ───────────────────────────────────────── */
[data-theme="dark"] #screen-plus          { background: #111827; }
[data-theme="dark"] .plus-tile            { background: #1C2537; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .plus-tile-icon       { background: rgba(240,160,64,0.12); color: var(--gold-main); }
[data-theme="dark"] .plus-tile-label      { color: rgba(255,255,255,0.88); }
[data-theme="dark"] .plus-section-label   { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .profil-section-label { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .section-title        { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .plus-header-sub      { color: rgba(255,255,255,0.85); }

/* ─── Vidéos ─────────────────────────────────────── */
[data-theme="dark"] #screen-videos        { background: #111827; }
[data-theme="dark"] .videos-list          { background: #111827; }
[data-theme="dark"] .section-label-dark   { color: rgba(255,255,255,0.38); }
[data-theme="dark"] .vid-row-item         { background: #1C2537; box-shadow: none; }
[data-theme="dark"] .vid-row-item:active  { background: #1e3050; }
[data-theme="dark"] .vi-title-sm          { color: #fff; }
[data-theme="dark"] .vi-meta-sm           { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .vid-thumb-box        { background: #111827; }
[data-theme="dark"] #screen-videos .search-bar        { background: #1C2537; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] #screen-videos .search-bar input  { color: #fff; background: transparent; }
[data-theme="dark"] #screen-videos .search-bar input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] #screen-videos .search-bar span   { color: rgba(255,255,255,0.45); }

/* ─── Bible (sélecteurs langue/version) ─────────── */
[data-theme="dark"] #screen-bible .bible-dd-selector  { background: #1C2537; }
[data-theme="dark"] #screen-bible .bible-dd-header    { background: #1C2537; }
[data-theme="dark"] #screen-bible .bible-dd-header:active { background: #1e3050; }
[data-theme="dark"] #screen-bible .bible-dd-label     { color: rgba(255,255,255,0.65); }
[data-theme="dark"] #screen-bible .bible-dd-value     { color: #fff; }
[data-theme="dark"] #screen-bible .bible-dd-chevron   { color: rgba(255,255,255,0.45); }
[data-theme="dark"] #screen-bible .bible-dd-grid      { background: #111827; border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] #screen-bible .bible-dd-chip      { background: #1C2537; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] #screen-bible .bible-dd-chip.active { background: var(--gold-main); color: var(--navy); border-color: var(--gold-main); }
[data-theme="dark"] #screen-bible .bible-dd-list      { background: #111827; border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] #screen-bible .bible-dd-ver-item  { border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] #screen-bible .bible-dd-ver-label { color: rgba(255,255,255,0.92); font-weight: 700; }
[data-theme="dark"] #screen-bible .bible-dd-ver-item:active  { background: #1e3050; }
[data-theme="dark"] #screen-bible .bible-dd-ver-item.active  { background: rgba(240,160,64,0.1); }
[data-theme="dark"] #screen-bible .bible-dd-ver-item.active .bible-dd-ver-label { color: var(--gold-light); }
/* Panneaux (livres, chapitres, lecteur) */
[data-theme="dark"] #screen-bible .bible-panel        { background: #111827; }
[data-theme="dark"] #screen-bible .panel-sub-hdr      { border-bottom-color: rgba(255,255,255,0.07); background: #1C2537; }
[data-theme="dark"] #screen-bible .panel-sub-title    { color: var(--gold-light); }
[data-theme="dark"] #screen-bible .panel-back-btn     { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.12); }
/* Lecteur */
[data-theme="dark"] #screen-bible .reader-nav-hdr     { background: #1C2537; }
[data-theme="dark"] #screen-bible .reader-book-btn    { color: #fff; }
[data-theme="dark"] #screen-bible .reader-sep         { color: rgba(255,255,255,0.4); }
[data-theme="dark"] #screen-bible .panel-tool-btn     { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] #screen-bible .panel-tool-btn:active { background: rgba(255,255,255,0.1); }
/* Vieux sélecteurs btool (rétro-compat) */
[data-theme="dark"] #screen-bible .bible-nav-btn      { background: #1C2537; border-color: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] #screen-bible .bible-nav-sep      { color: rgba(255,255,255,0.25); }
[data-theme="dark"] #screen-bible .btool              { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] #screen-bible .btool:active       { background: rgba(255,255,255,0.1); }

/* ─── Parcours de Foi (Timeline) ────────────────── */
[data-theme="dark"] .timeline-card   { background: #1C2537; border-color: rgba(245,192,96,0.4) !important; }
[data-theme="dark"] .timeline-ctitle { color: var(--gold-light); }
[data-theme="dark"] .timeline-ctext  { color: rgba(255,255,255,0.72); }
[data-theme="dark"] .timeline-cstep  { color: rgba(255,255,255,0.35); }

/* ─── Messages (liste) ──────────────────────────── */
[data-theme="dark"] .msg-list-item   { background: #1C2537; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .msg-list-title  { color: #fff; }
[data-theme="dark"] .msg-list-ref    { color: rgba(255,255,255,0.42); }

/* ─── Q&R — cartes question et réponse même fond ── */
[data-theme="dark"] .qr-question     { background: #1C2537; border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .qr-answer       { background: #1C2537; }

/* ─── Activités ─────────────────────────────────── */
[data-theme="dark"] .activites-body  { background: #111827; }
[data-theme="dark"] .activite-card   { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; }

/* ─── Temoignages (corps) ───────────────────────── */
[data-theme="dark"] .temo-body       { background: #111827; }
[data-theme="dark"] .temo-filter-btn { background: #1C2537; color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .temo-filter-btn.active { background: var(--gold-main); color: var(--navy); border-color: var(--gold-main); }

/* ─── Communauté — boutons contact ─────────────── */
[data-theme="dark"] .contact-btn-wa    { filter: brightness(0.85); }
[data-theme="dark"] .contact-btn-phone { filter: brightness(0.85); }

/* ─── Bible — liste livres + chapitres + lecteur ─ */
[data-theme="dark"] #screen-bible .book-chip   { background: #1C2537; color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] #screen-bible .book-chip.active-book { background: var(--gold-main); color: var(--navy); border-color: var(--gold-main); }
[data-theme="dark"] #screen-bible .testament-label { color: var(--gold-main); }
[data-theme="dark"] #screen-bible .chap-chip   { background: #1C2537; color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] #screen-bible .chap-chip.active-chap { background: var(--gold-main); color: var(--navy); border-color: var(--gold-main); }
[data-theme="dark"] #screen-bible .verse-text  { color: #ddd; }
[data-theme="dark"] #screen-bible .verse-ref   { color: rgba(255,255,255,0.55); }
[data-theme="dark"] #screen-bible .verse-num   { color: var(--gold-main); }
[data-theme="dark"] #screen-bible .bible-verse.highlighted { background: rgba(240,160,64,0.15); }
[data-theme="dark"] #screen-bible .bible-chap-nav { background: #111827; border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] #screen-bible .chap-nav-btn   { color: rgba(255,255,255,0.6); }
[data-theme="dark"] #screen-bible .chap-nav-label { color: rgba(255,255,255,0.35); }
[data-theme="dark"] #screen-bible .bible-version-note { color: var(--gold-main); }
[data-theme="dark"] #screen-bible .bible-panel  { background: #111827; }
/* Testament cards + book rows — dark mode */
[data-theme="dark"] .testament-card { background: #1C2537; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .testament-card-title { color: #fff; }
[data-theme="dark"] .testament-card-count { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .testament-card-arrow { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .bible-search-bar { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .bible-search-bar input { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .bible-search-bar i { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .book-row { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .book-row-name { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .book-row.active-book .book-row-name { color: var(--gold-main); }
[data-theme="dark"] .book-row-chaps { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .book-row-audio { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .book-row-arrow { color: rgba(255,255,255,0.2); }

/* ─── Message reader (contenu complet) ──────────── */
[data-theme="dark"] .msg-full-card  { background: #1C2537; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
/* Bouton d'écoute : sa couleur de base (--navy) est prévue pour la carte
   blanche du thème clair. Sur le fond sombre de la carte, elle tombait à
   1,16:1 — sous le seuil AA de 4,5:1, le libellé était illisible. Le doré
   clair monte à 9,2:1 et s'accorde à l'icône et à la bordure du bouton.
   Les états « lecture en cours » et « attire l'attention » sont exclus :
   ils passent le bouton en plein doré et écrivent déjà en blanc dessus. */
[data-theme="dark"] .msg-listen-btn:not(.speaking):not(.attire-attention) {
  color: var(--gold-light);
}
[data-theme="dark"] .msg-title      { color: #fff; }
[data-theme="dark"] .msg-body       { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .hashtag-box    { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .hashtag-box p  { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .verse-box      { background: #1a2942; border-left-color: var(--gold-main); }
[data-theme="dark"] .verse-ref      { color: var(--gold-light) !important; }
[data-theme="dark"] .verse-text     { color: rgba(255,255,255,0.92) !important; font-size: 13px !important; }
[data-theme="dark"] .decla-box      { background: rgba(240,160,64,0.12); border-color: rgba(240,160,64,0.3); }
[data-theme="dark"] .decla-text     { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .decla-label    { color: var(--gold-light); }
[data-theme="dark"] .btn-primary    { background: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] .screen-body    { background: #111827; }

/* ─── Plan de lecture (reading-plan screen) ─────── */
[data-theme="dark"] #screen-reading-plan   { background: #111827; }
[data-theme="dark"] .rp-portion            { background: #1C2537; box-shadow: none; }
[data-theme="dark"] .rp-book-name          { color: #fff; }
[data-theme="dark"] .rp-chap-label         { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .rp-open-label         { color: var(--gold-light); }
[data-theme="dark"] .rp-progress-wrap      { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .rp-progress-label     { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .rp-portions-title     { color: rgba(255,255,255,0.45); }

/* ─── Modal paramètres notifications ────────────── */
[data-theme="dark"] .notif-modal-sheet     { background: #1C2537; }
[data-theme="dark"] .notif-settings-overlay .modal-sheet { background: #1C2537; }
[data-theme="dark"] .notif-perm-box        { background: rgba(232,119,106,0.12); border-color: rgba(232,119,106,0.25); }
[data-theme="dark"] .notif-perm-box p      { color: rgba(255,255,255,0.8); }
[data-theme="dark"] .notif-settings-note   { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .notif-row-title       { color: #fff; }
[data-theme="dark"] .notif-row-sub         { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .notif-row             { background: transparent; border-bottom-color: rgba(255,255,255,0.06); }

/* ─── Messages screen (body général) ────────────── */
[data-theme="dark"] #screen-messages .screen-body { background: #111827; }

/* ─── Badge categorie message ("FAITH & VICTORY" etc.) ─ */
[data-theme="dark"] .badge {
  background: rgba(245,192,96,0.15);
  border-color: rgba(245,192,96,0.35);
  color: var(--gold-light);
}

/* ─── Hashtag box (question/réponse du message) ──────── */
[data-theme="dark"] .hashtag-box {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .hashtag-question { color: #fff; }
[data-theme="dark"] .hashtag-answer   { color: rgba(255,255,255,0.7); }

/* ─── Bouton Partager / Share (btn-secondary) ──────── */
[data-theme="dark"] .btn-secondary {
  background: #1e3050;
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
[data-theme="dark"] .btn-secondary:hover { opacity: 0.85; }

/* ─── Bouton principal (btn-primary) en dark ─────────── */
[data-theme="dark"] .btn-primary {
  background: rgba(245,192,96,0.18);
  border: 1px solid rgba(245,192,96,0.3);
  color: var(--gold-light);
}

/* ─── Modales générales (sheet header + close) ──────── */
[data-theme="dark"] .modal-sheet-header {
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .modal-sheet-header h3 { color: var(--gold-main); }
[data-theme="dark"] .modal-sheet-close {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}
[data-theme="dark"] .modal-sheet-body .section-title { color: rgba(255,255,255,0.38); }

/* ─── Modal Événements — tous les textes ─────────────── */
[data-theme="dark"] .event-badge        { color: var(--gold-light); background: rgba(245,192,96,0.15); border-color: rgba(245,192,96,0.3); }
[data-theme="dark"] .event-badge-live    { color: #fff; background: rgba(192,57,43,0.85); border-color: rgba(192,57,43,0.9); }
[data-theme="dark"] .event-title        { color: #fff; }
[data-theme="dark"] .event-desc         { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .event-meta         { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .event-notif-section { border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .event-notif-title  { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .event-notif-btn    { background: rgba(245,192,96,0.2); color: var(--gold-light); border: 1px solid rgba(245,192,96,0.35); }
[data-theme="dark"] .event-notif-note   { color: rgba(255,255,255,0.4); }

/* ─── Toutes les modales sheets — body text ──────────── */
[data-theme="dark"] .notif-modal-sheet  { background: #1C2537; }
[data-theme="dark"] .modal-sheet        { background: #1C2537; }

/* ─── Onboarding ─────────────────────────────────── */
[data-theme="dark"] .onboarding-step { background: #1C2537; }
[data-theme="dark"] .ob-title  { color: #fff; }
[data-theme="dark"] .ob-desc   { color: rgba(255,255,255,0.65); }

/* ══════════════════════════════════════════════════
   DARK MODE — COMPLÉMENT (éléments manquants)
══════════════════════════════════════════════════ */

/* ─── Corps de pages sans dark mode ─────────────── */
[data-theme="dark"] .qr-body        { background: #111827; }
[data-theme="dark"] .plus-body      { background: #111827; }
[data-theme="dark"] .timeline-body  { background: #111827; }
[data-theme="dark"] #screen-home    { background: #111827; }
[data-theme="dark"] #screen-qr      { background: #111827; }
[data-theme="dark"] #screen-plus    { background: #111827; }
[data-theme="dark"] #screen-parcours{ background: #111827; }
[data-theme="dark"] #screen-temoignages { background: #111827; }
[data-theme="dark"] #screen-questions   { background: #111827; }
[data-theme="dark"] #screen-communaute  { background: #111827; }
[data-theme="dark"] #screen-activites   { background: #111827; }
[data-theme="dark"] #screen-messages    { background: #111827; }
[data-theme="dark"] #screen-videos      { background: #111827; }
[data-theme="dark"] #screen-books       { background: #111827; }

/* ─── Accueil — body + cards ───────────────────── */
[data-theme="dark"] .home-body      { background: #111827; }
[data-theme="dark"] .msg-card       { background: #1C2537; border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .msg-date-label { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .msg-tag        { color: rgba(255,255,255,0.55); }
/* « SERVICE DE RÉVEIL » → couleur identique à « PRIÈRE & INTERCESSION » en dark */
[data-theme="dark"] .activite-notif-title { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .msg-ref        { color: var(--gold-light); }
[data-theme="dark"] .reading-badge  { background: rgba(80,184,150,0.15); color: var(--green); }
[data-theme="dark"] .featured-card  { background: #1C2537; }
[data-theme="dark"] .featured-card-title { color: #fff; }
[data-theme="dark"] .featured-card-sub   { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .temo-stats     { background: #1C2537; }
[data-theme="dark"] .temo-stat-n    { color: var(--gold-light); }
[data-theme="dark"] .temo-stat-l    { color: rgba(255,255,255,0.55); }

/* ─── Parcours de foi — timeline ───────────────── */
[data-theme="dark"] .timeline-card  { background: #1C2537; }
[data-theme="dark"] .timeline-year  { /* color inline, kept */ }
[data-theme="dark"] .timeline-ctitle{ color: #fff; }
[data-theme="dark"] .timeline-ctext { color: rgba(255,255,255,0.65); }

/* ─── Questions / Q&R ──────────────────────────── */
[data-theme="dark"] .q-form         { background: #111827; }
[data-theme="dark"] .q-card         { background: #1C2537; box-shadow: none; }
[data-theme="dark"] .q-label        { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .q-input        { background: #111827; border-color: rgba(255,255,255,0.1); color: #fff; }
[data-theme="dark"] .q-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .q-info         { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .q-info p       { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .qr-card        { background: #1C2537; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .qr-question    { color: #fff; }
[data-theme="dark"] .qr-answer      { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .qr-meta        { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .qr-cta-btn     { background: rgba(245,192,96,0.15); color: var(--gold-light); border-color: rgba(245,192,96,0.3); }

/* ─── Témoignages — formulaire ─────────────────── */
[data-theme="dark"] .temo-form-body   { background: #111827; }
[data-theme="dark"] .temo-form-header { background: #111827; border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .temo-form-title  { color: #fff; }
[data-theme="dark"] .temo-card        { background: #1C2537; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .temo-card-title  { color: #fff; }
[data-theme="dark"] .temo-card-text   { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .temo-input       { background: #111827; border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .temo-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .temo-textarea    { background: #111827; border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .temo-divider     { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .vi-title-sm      { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .vi-sub           { color: rgba(255,255,255,0.45); }

/* ─── Plus screen — tiles ──────────────────────── */
[data-theme="dark"] .plus-tile        { background: #1C2537; }
[data-theme="dark"] .plus-section-label { color: rgba(255,255,255,0.35); }

/* ─── Auth / connexion ─────────────────────────── */
[data-theme="dark"] .auth-body        { background: #111827; }
[data-theme="dark"] .auth-card        { background: #1C2537; box-shadow: none; }
[data-theme="dark"] .auth-input       { background: #111827; border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .auth-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .auth-label       { color: rgba(255,255,255,0.5); }

/* ─── Donation modal ───────────────────────────── */
[data-theme="dark"] .donation-modal   { background: #1C2537; }
[data-theme="dark"] .donation-modal-name { color: #fff; }
[data-theme="dark"] .donation-modal-tagline { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .donation-divider { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .donation-verse-text { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .donation-msg     { color: rgba(255,255,255,0.65); }

/* ─── Nations modal ────────────────────────────── */
[data-theme="dark"] .nations-modal-sheet { background: #1C2537; }
[data-theme="dark"] .nations-section-h3  { color: #fff; }
[data-theme="dark"] .nations-section-sub { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .nations-flag-card   { background: #111827; }
[data-theme="dark"] .nations-flag-name   { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .nations-divider     { background: rgba(255,255,255,0.07); }

/* ─── Vidéos ────────────────────────────────────── */
[data-theme="dark"] .videos-page-container { background: #111827; }
[data-theme="dark"] .vr-card        { background: #1C2537; }
[data-theme="dark"] .vr-title       { color: #fff; }
[data-theme="dark"] .vr-sub         { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .vr-text        { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .vr-date        { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .search-bar     { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .search-bar input { color: #fff; }
[data-theme="dark"] .search-bar input::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .search-bar i   { color: rgba(255,255,255,0.4); }

/* ─── Activités ─────────────────────────────────── */
[data-theme="dark"] .act-card       { background: #1C2537; }
[data-theme="dark"] .act-title      { color: #fff; }
[data-theme="dark"] .act-sub        { color: rgba(255,255,255,0.5); }

/* ─── Profil — compte card (fond = fond de page) ────────── */
[data-theme="dark"] .profil-card {
  background: #111827;
  box-shadow: none;
  border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .profil-name-inline {
  color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(255,255,255,0.15);
  background: transparent;
}
[data-theme="dark"] .profil-name-inline::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .profil-account-sub { color: rgba(255,255,255,0.45); }

/* ─── Profil — inputs ───────────────────────────── */
[data-theme="dark"] .profil-input   { background: #111827; border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .profil-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .psr-row        { background: #1C2537; }
[data-theme="dark"] .psr-label      { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .psr-value      { color: #fff; }
[data-theme="dark"] .psr-arrow      { color: rgba(255,255,255,0.3); }
/* Récompense annuelle — dark mode : fond identique aux autres cartes */
[data-theme="dark"] .profil-reward-card {
  background: #1C2537;
  border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .profil-reward-title { color: #fff; }
[data-theme="dark"] .profil-reward-desc  { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .profil-reward-bar-wrap { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .profil-reward-pct   { color: var(--gold-light); }

/* ════════════════════════════════════════════════════════════
   MON ESPACE
════════════════════════════════════════════════════════════ */
#screen-mon-espace {
  background: var(--page-bg);
}

/* Top bar — grille 3 colonnes : [bouton] [titre centré] [espace] */
/* Topbar empilé : chevron sur sa propre ligne, titre centré en-dessous */
.me-topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  background: transparent;
  flex-shrink: 0;
}
.me-back-btn {
  position: static;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 111;
  transition: background 0.15s;
  margin-bottom: 8px;
}
.me-back-btn:active { background: rgba(255,255,255,0.35); }
.me-topbar-title {
  color: var(--gold-light);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  width: 100%;
}

/* Body scroll */
.me-body {
  flex: 1;
  min-height: 0;          /* indispensable pour que overflow-y fonctionne en flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* User block */
.me-user-block {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 6px;
}
.me-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-main), var(--gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--navy);
  flex-shrink: 0;
}
.me-user-info { flex: 1; min-width: 0; }
.me-user-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-user-sub {
  font-size: 12px;
  color: var(--navy-light);
  margin-top: 2px;
}
.me-user-edit-btn {
  background: none;
  border: none;
  color: var(--gold-main);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

/* Section label */
.me-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 18px 0 8px;
  border-radius: 0;
}

/* Cards */
.me-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
}
.me-card:active { opacity: 0.75; transform: scale(0.985); }

.me-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
/* Icon colour variants */
.me-icon-orange { background: rgba(240,160,64,0.15); color: var(--gold-main); }
.me-icon-blue   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.me-icon-red    { background: rgba(239,68,68,0.12);  color: #ef4444; }
.me-icon-green  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.me-icon-purple { background: rgba(168,85,247,0.12); color: #a855f7; }
.me-icon-teal   { background: rgba(20,184,166,0.12); color: #14b8a6; }
.me-icon-navy   { background: rgba(10,38,90,0.1);    color: var(--navy); }

.me-card-info { flex: 1; min-width: 0; }
.me-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-card-sub {
  font-size: 12px;
  color: var(--navy-light);
  margin-top: 2px;
}
.me-chevron,
.me-card-arrow {
  font-size: 14px;
  color: var(--navy-light);
  flex-shrink: 0;
}

/* Version footer */
.me-version {
  text-align: center;
  font-size: 11px;
  color: var(--navy-light);
  padding: 8px 0 2px;
}

/* ── About / Guide screens ────────────────────────────────── */
#screen-about,
#screen-guide {
  background: var(--page-bg);
}

/* Shared topbar reuse: .me-topbar / .me-back-btn already defined above */

/* About hero — carte fixe (hors flux de scroll) */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 16px 10px;
  margin: 0 16px 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  flex-shrink: 0;
}
.about-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  padding: 6px;
  border: 2px solid rgba(245,192,96,0.65);
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.about-app-name,
.about-hero-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 0.5px;
}
.about-tagline,
.about-hero-sub {
  font-size: 11px;
  color: var(--navy-light);
  text-align: center;
}
.about-hero-badge {
  display: inline-block;
  background: rgba(80,184,150,0.12);
  color: #50b896;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 20px;
  padding: 3px 10px;
  margin-top: 2px;
}

/* Guide hero — carte fixe (hors flux de scroll) */
.guide-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 16px 10px;
  margin: 0 16px 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  flex-shrink: 0;
}
.guide-hero-icon {
  font-size: 28px;
  color: var(--gold-main);
}
.guide-hero-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--navy);
}
.guide-hero-sub {
  font-size: 11px;
  color: var(--navy-light);
  text-align: center;
}

/* Accordion body */
.about-body {
  flex: 1;
  min-height: 0;          /* indispensable pour que overflow-y fonctionne en flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Accordion section */
.about-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  transition: opacity 0.15s;
}
.about-section:active { opacity: 0.75; }
.about-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.about-section-ico {
  font-size: 20px;
  flex-shrink: 0;
}
.about-section-head > span {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #f5c060 !important; /* or doré — visible sur tout fond */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}
/* Mode clair : navy foncé sur fond blanc */
.phone-frame:not([data-theme="dark"]) .about-section-head > span {
  color: #1e3050 !important;
}
.about-section-arrow {
  font-size: 16px;
  color: rgba(255,255,255,0.55) !important;
  flex-shrink: 0;
}
.phone-frame:not([data-theme="dark"]) .about-section-arrow {
  color: #4a6080 !important;
}
.about-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.2s ease;
  padding: 0 16px;
}
.about-section-body.open {
  max-height: 5000px; /* augmenté pour les sections avec beaucoup de contenu */
  padding: 0 16px 16px;
}
/* Icônes Bootstrap inline dans les paragraphes */
.about-section-body p .bi {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 5px;
  flex-shrink: 0;
}
.about-section-body p {
  font-size: 13px;
  color: var(--section-body-txt);
  line-height: 1.65;
  margin: 0 0 8px;
}
.about-section-body p:last-child { margin-bottom: 0; }
.about-section-body strong { color: var(--section-body-str); font-weight: 700; }

/* ── Nouvelles lignes de navigation (abt-row) ──────────────── */
.abt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #1C2537;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  width: 100%;
  transition: opacity 0.15s;
}
.abt-row:active { opacity: 0.7; }
.abt-row > span {
  flex: 1;
  min-width: 0; /* CRITIQUE — empêche la troncature du texte flex */
  font-size: 15px;
  font-weight: 700;
  color: #f5c060;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mode clair */
.phone-frame:not([data-theme="dark"]) .abt-row {
  background: #ffffff;
  border-color: #e8ecf2;
}
.phone-frame:not([data-theme="dark"]) .abt-row > span {
  color: #1e3050;
}

/* Contact */
.about-contact {
  text-align: center;
  font-size: 12px;
  color: var(--navy-light);
  padding: 8px 0 4px;
}
.about-contact a { color: var(--gold-main); text-decoration: none; font-weight: 600; }

/* ── Écran de détail (section About / Guide) ────────────── */
.detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 36px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.detail-body p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--section-body-txt);
  margin: 0 0 14px;
}
.detail-body p:last-child { margin-bottom: 0; }
.detail-body strong { color: var(--section-body-str); font-weight: 700; }
.detail-body .bi { font-size: 15px; vertical-align: middle; margin-right: 5px; }
/* Sous-titres de section (À propos & légal) */
.detail-body h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--section-body-str);
  margin: 22px 0 10px;
  line-height: 1.4;
}
.detail-body h4:first-child { margin-top: 0; }
.detail-body ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.detail-body li {
  position: relative;
  font-size: 14px;
  line-height: 1.65;
  color: var(--section-body-txt);
  padding-left: 18px;
  margin-bottom: 7px;
}
.detail-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-main);
}
.detail-body li:last-child { margin-bottom: 0; }
.detail-body .detail-note {
  font-size: 13px;
  font-style: italic;
  color: var(--section-body-txt);
  opacity: 0.85;
  margin-bottom: 14px;
}
.detail-body .detail-mail {
  color: var(--gold-deep);
  font-weight: 700;
}

/* ── Dark mode — Mon Espace ──────────────────────────────── */
/* Fond des écrans secondaires : gradient qui descend du header vers le body */
[data-theme="dark"] #screen-mon-espace,
[data-theme="dark"] #screen-about,
[data-theme="dark"] #screen-guide,
[data-theme="dark"] #screen-about-detail,
[data-theme="dark"] #screen-evenements,
[data-theme="dark"] #screen-notif-settings,
[data-theme="dark"] #screen-prieres,
[data-theme="dark"] #screen-admin-q,
[data-theme="dark"] #screen-auth {
  background: linear-gradient(
    180deg,
    #1a3a7a 0%,
    rgba(212, 132, 90, 0.35) 18%,
    #111827 40%,
    #111827 100%
  );
}

/* me-topbar conserve son dégradé navy→gold en dark mode — pas d'override */

[data-theme="dark"] .me-card,
[data-theme="dark"] .about-section { background: #1C2537; border-color: rgba(255,255,255,0.07); }
/* Hero cards en dark mode : fond transparent (le gradient de l'écran transparaît) */
[data-theme="dark"] .about-hero,
[data-theme="dark"] .guide-hero {
  background: rgba(22,38,64,0.72);
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .me-user-name,
[data-theme="dark"] .me-card-title,
[data-theme="dark"] .about-app-name,
[data-theme="dark"] .about-hero-title,
[data-theme="dark"] .guide-hero-title { color: #fff; }

[data-theme="dark"] .me-user-sub,
[data-theme="dark"] .me-card-sub,
[data-theme="dark"] .me-section-label,
[data-theme="dark"] .me-version,
[data-theme="dark"] .about-tagline,
[data-theme="dark"] .about-hero-sub,
[data-theme="dark"] .guide-hero-sub,
[data-theme="dark"] .about-contact { color: rgba(255,255,255,0.45); }
/* Chevrons des cartes : blancs en sombre. .me-card-arrow n'avait aucun style
   et héritait du navy ambiant — noir sur carte sombre (hub Prières). */
[data-theme="dark"] .me-chevron,
[data-theme="dark"] .me-card-arrow { color: #fff; }
/* Accordéon dark mode — géré directement via les règles :not() ci-dessus */
[data-theme="dark"] .about-section-head { color: #ffffff; }

[data-theme="dark"] .me-icon-navy { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — Thème "Aube / Bonjour"
   Fond ivoire doux · Dégradé lever de soleil · Ombres subtiles
   Actif quand data-theme="light" (setTheme() le pose toujours)
══════════════════════════════════════════════════════════════ */

/* 1. FOND & SCREENS ──────────────────────────────────── */
[data-theme="light"] body,
[data-theme="light"] .phone-frame        { background: #FDFBF7; }
[data-theme="light"] #screen-home,
[data-theme="light"] #screen-plus,
[data-theme="light"] #screen-profil,
[data-theme="light"] #screen-messages,
[data-theme="light"] #screen-bible,
[data-theme="light"] #screen-videos,
[data-theme="light"] #screen-activites,
[data-theme="light"] #screen-questions,
[data-theme="light"] #screen-qr,
[data-theme="light"] #screen-temoignages,
[data-theme="light"] #screen-parcours,
[data-theme="light"] #screen-books,
[data-theme="light"] #screen-communaute,
[data-theme="light"] #screen-reading-plan,
[data-theme="light"] #screen-mon-espace,
[data-theme="light"] #screen-about,
[data-theme="light"] #screen-about-detail,
[data-theme="light"] #screen-evenements,
[data-theme="light"] #screen-notif-settings,
[data-theme="light"] #screen-prieres,
[data-theme="light"] #screen-admin-q,
[data-theme="light"] #screen-guide       { background: #FDFBF7; }

/* 2. DÉGRADÉ LEVER DE SOLEIL — tous les headers ──────── */
[data-theme="light"] .dark-header,
[data-theme="light"] .screen-header,
[data-theme="light"] .plus-header,
[data-theme="light"] .profil-hero,
[data-theme="light"] .questions-hero,
[data-theme="light"] .qr-hero,
[data-theme="light"] .parcours-hero,
[data-theme="light"] .temo-hero,
[data-theme="light"] .books-header,
[data-theme="light"] .communaute-hero,
[data-theme="light"] .home-hero,
[data-theme="light"] .pg-hero {
  background: linear-gradient(160deg, #C8DFFE 0%, #A8C8F0 45%, #FFD8A8 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}
/* Bible : dégradé pastel + fondu sur ::before (le fond), pas sur le header,
   pour ne pas estomper le titre ni les cartes Langue/Version. */
[data-theme="light"] .bible-header { background: transparent; }
[data-theme="light"] .bible-header::before {
  background: linear-gradient(160deg, #C8DFFE 0%, #A8C8F0 45%, #FFD8A8 100%);
}
[data-theme="light"] .me-topbar {
  background: linear-gradient(160deg, #C8DFFE 0%, #A8C8F0 45%, #FFD8A8 100%);
  padding-bottom: 24px;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}

/* 3. TEXTES SUR LES HEADERS ─────────────────────────── */
[data-theme="light"] .header-title                { color: var(--navy) !important; }
/* Sous-titres : navy pleine opacité pour contraste suffisant sur gradient clair */
[data-theme="light"] .header-sub                  { color: #1e3050 !important; font-weight: 700 !important; opacity: 1 !important; }
[data-theme="light"] .dark-header h2              { color: var(--navy) !important; }
[data-theme="light"] .dark-header p               { color: #1e3050 !important; font-weight: 700 !important; opacity: 1 !important; }
[data-theme="light"] .plus-header-title           { color: var(--navy); }
[data-theme="light"] .plus-header-sub             { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .communaute-hero-title        { color: var(--navy); }
[data-theme="light"] .communaute-hero-sub          { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .questions-hero h2            { color: var(--navy); }
[data-theme="light"] .questions-hero p             { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .questions-hero .q-icon       { color: var(--gold-main); }
[data-theme="light"] .parcours-title               { color: var(--navy); }
[data-theme="light"] .parcours-sub                 { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .parcours-badge               { color: var(--navy); background: rgba(30,48,80,0.10); }
[data-theme="light"] .temo-badge                   { color: var(--navy); }
[data-theme="light"] .books-header-title           { color: var(--navy); }
[data-theme="light"] .books-header-sub             { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .profil-hero-name-display     { color: var(--navy); }
[data-theme="light"] .me-topbar-title              { color: var(--navy); }
[data-theme="light"] .pg-hero-title                { color: var(--navy); }
[data-theme="light"] .pg-hero-sub                  { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .qr-hero h2                   { color: var(--navy); }
[data-theme="light"] .qr-hero p                    { color: #1e3050 !important; font-weight: 700 !important; }
[data-theme="light"] .qr-hero-icon                 { color: var(--gold-main); }
[data-theme="light"] .bible-page-title             { color: var(--navy); }

/* 4. BOUTONS RETOUR (cercles sombres sur fond clair) ─── */
[data-theme="light"] .screen-close-btn {
  background: rgba(30,48,80,0.12);
  color: var(--navy);
  backdrop-filter: none;
}
[data-theme="light"] .screen-close-btn:active { background: rgba(30,48,80,0.22); }
[data-theme="light"] .me-back-btn {
  background: rgba(30,48,80,0.10);
  color: var(--navy);
}
[data-theme="light"] .me-back-btn:active { background: rgba(30,48,80,0.20); }

/* 5. HOME SCREEN ─────────────────────────────────────── */
/* Supprimer le mask-image du home-hero en light : le texte en bas serait masqué */
[data-theme="light"] .home-hero {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
/* Logo → couleurs naturelles */
[data-theme="light"] .home-logo { filter: none; }
/* Halo doré → inutile sur fond clair */
[data-theme="light"] .home-glow { opacity: 0; }
/* Gradient home-hero se fond dans l'ivoire à la base */
[data-theme="light"] .home-hero {
  background: linear-gradient(175deg, #C8DFFE 0%, #A8C8F0 40%, #FFD8A8 72%, #FDFBF7 100%) !important;
}
/* Pill de date → ton clair cohérent */
[data-theme="light"] .home-date {
  background: rgba(30,48,80,0.10) !important;
  border-color: rgba(30,48,80,0.18) !important;
  color: rgba(30,48,80,0.80) !important;
}
[data-theme="light"] .home-welcome-msg {
  color: rgba(30,48,80,0.78) !important;
  text-shadow: none !important;
}
[data-theme="light"] .greeting-text { color: var(--navy); text-shadow: none; }
[data-theme="light"] .msg-ref       { color: rgba(30,48,80,0.55); }

/* ── TOUTES LES CARTES ACCUEIL → blanc pur ─────────── */
[data-theme="light"] .msg-card-big {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(30,48,80,0.09);
}
[data-theme="light"] .msg-card-big::after { display: none; }
[data-theme="light"] .msg-tag   { color: var(--gold-deep); font-weight: 800; letter-spacing: 1.5px; }
[data-theme="light"] .msg-text  { color: var(--navy); }
[data-theme="light"] .msg-ref   { color: rgba(30,48,80,0.55); }

[data-theme="light"] .rp-home-card {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
[data-theme="light"] .rp-home-title { color: #0F2547; }
[data-theme="light"] .rp-home-sub   { color: rgba(30,48,80,0.65); }
[data-theme="light"] .rp-home-icon,
[data-theme="light"] .rp-home-arrow { color: var(--gold-main); }

[data-theme="light"] .streak-row {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
[data-theme="light"] .streak-count { color: var(--navy); }
[data-theme="light"] .streak-label { color: rgba(30,48,80,0.65); }

[data-theme="light"] .home-faith-cta {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
[data-theme="light"] .home-faith-title { color: var(--navy); }
[data-theme="light"] .home-faith-sub   { color: rgba(30,48,80,0.65); }
[data-theme="light"] .home-faith-emoji { color: var(--gold-main); }

[data-theme="light"] .activite-notif-card {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(30,48,80,0.08);
}
/* « Prochain événement » → noir comme « Plan de lecture » (rp-home-title light) */
[data-theme="light"] .activite-notif-badge { color: #0F2547; }
/* « SERVICE DE RÉVEIL » → gold comme « PRIÈRE & INTERCESSION » (msg-tag light) */
[data-theme="light"] .activite-notif-title { color: var(--gold-deep); font-weight: 800; letter-spacing: 1.5px; }
[data-theme="light"] .activite-notif-sub   { color: #0F2547; }
/* Icône événement : couleur identique à l'icône Plan de lecture */
[data-theme="light"] .activite-notif-icon  { color: var(--gold-main); }

/* ── VIDÉOS — carte vedette ─────────────────────────── */
[data-theme="light"] .featured-card {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(30,48,80,0.10);
}

/* ── GROUPE DE PRIÈRE → blanc ───────────────────────── */
[data-theme="light"] .prayer-group-card {
  background: #ffffff;
  border-color: rgba(30,48,80,0.08);
  box-shadow: 0 2px 16px rgba(30,48,80,0.09);
}
[data-theme="light"] .prayer-group-badge  { background: rgba(30,48,80,0.07); border-color: rgba(30,48,80,0.12); color: var(--navy); }
[data-theme="light"] .prayer-group-name   { color: var(--navy); }
[data-theme="light"] .prayer-body-text    { border-top-color: rgba(30,48,80,0.08); }
[data-theme="light"] .prayer-body-text p  { color: rgba(30,48,80,0.72); }
[data-theme="light"] .prayer-body-text strong { color: var(--navy); }
[data-theme="light"] .prayer-gmt          { color: rgba(30,48,80,0.45); }
[data-theme="light"] .prayer-cta-line     { color: var(--gold-deep) !important; }

/* ── ACTIVITÉS — écran fond navy → ivoire, cartes blanches */
[data-theme="light"] #screen-activites,
[data-theme="light"] #screen-activites .screen-body,
[data-theme="light"] #activites-list { background: var(--cream) !important; }
[data-theme="light"] .activite-card {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(30,48,80,0.08);
}
[data-theme="light"] .activite-card-title { color: var(--navy); }
[data-theme="light"] .activite-card-text  { color: rgba(30,48,80,0.65); }
[data-theme="light"] .section-label-dark  { color: rgba(30,48,80,0.60); }

/* 6. NAVIGATION BASSE ───────────────────────────────── */
[data-theme="light"] .bottom-nav {
  background: rgba(253,251,247,0.95);
  border-top: 1px solid rgba(30,48,80,0.08);
  box-shadow: 0 -2px 20px rgba(30,48,80,0.07);
  backdrop-filter: blur(12px);
}
[data-theme="light"] .bottom-nav .nav-btn { color: rgba(30,48,80,0.45); }
[data-theme="light"] .bottom-nav .nav-btn.active { color: var(--navy); }

/* ── MODAL 9 NAZIONI → fond ivoire, textes navy ──────── */
[data-theme="light"] .nations-modal-sheet {
  background: #FDFBF7;
}
[data-theme="light"] .nations-modal-title  { color: var(--navy); }
[data-theme="light"] .nations-section-h3   { color: var(--navy); }
[data-theme="light"] .nations-section-sub  { color: rgba(30,48,80,0.65); }
[data-theme="light"] .nations-input {
  background: #ffffff;
  border-color: #E8E4DC;
  color: var(--navy);
}
[data-theme="light"] .nations-input::placeholder { color: rgba(30,48,80,0.35); }
[data-theme="light"] .nations-divider { background: #E8E4DC; }
[data-theme="light"] .nations-flag-card  { background: #ffffff; }
[data-theme="light"] .nations-flag-name  { color: var(--navy); }
[data-theme="light"] .nations-success    { color: var(--green); }

/* ── CENTRE DE PRIÈRE → blanc, textes navy ───────────── */
[data-theme="light"] .prayer-center-card {
  background: #ffffff;
  border-color: rgba(30,48,80,0.10);
  box-shadow: 0 2px 16px rgba(30,48,80,0.09);
}
[data-theme="light"] .prayer-center-card::before { display: none; }
[data-theme="light"] #prayer-time-display  { color: var(--navy); }
[data-theme="light"] .prayer-tz            { color: rgba(30,48,80,0.55); }
[data-theme="light"] .prayer-gmt-sep       { color: rgba(30,48,80,0.25); }
[data-theme="light"] .prayer-clock         { color: var(--navy); }

/* ── BOUTONS NAVY SECONDAIRES → style outline ────────── */
[data-theme="light"] .event-notif-btn {
  background: #ffffff;
  color: var(--gold-deep);
  border: 1.5px solid rgba(240,160,64,0.30);
  box-shadow: 0 1px 6px rgba(240,160,64,0.10);
  font-weight: 800;
}
[data-theme="light"] .event-notif-title { color: var(--navy); }

[data-theme="light"] .q-see-answers {
  background: #ffffff;
  color: var(--gold-deep);
  border: 1.5px solid rgba(240,160,64,0.30);
  box-shadow: 0 1px 6px rgba(240,160,64,0.10);
  font-weight: 800;
}
[data-theme="light"] .q-see-answers i { color: var(--gold-deep); }

/* 7. CARTES — blanches, bordure subtile, ombre navy ──── */
[data-theme="light"] .me-card,
[data-theme="light"] .profil-settings-card,
[data-theme="light"] .profil-stat-card,
[data-theme="light"] .profil-auth-card,
[data-theme="light"] .prayer-group-card,
[data-theme="light"] .q-card,
[data-theme="light"] .msg-full-card,
[data-theme="light"] .qr-card,
[data-theme="light"] .book-card,
[data-theme="light"] .timeline-card,
[data-theme="light"] .temo-card,
[data-theme="light"] .testament-card,
[data-theme="light"] .rp-portion,
[data-theme="light"] .pg-card,
[data-theme="light"] .about-hero,
[data-theme="light"] .guide-hero,
[data-theme="light"] .vid-row-item,
[data-theme="light"] .profil-reward-card,
[data-theme="light"] .communaute-feature,
[data-theme="light"] .cf-card {
  background: #ffffff;
  border: 1px solid rgba(30,48,80,0.08);
  box-shadow: 0 2px 16px rgba(30,48,80,0.08);
}
[data-theme="light"] .msg-list-item {
  background: #ffffff;
  border-color: #E8E4DC;
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
/* Cartes de livres : contraste plus net (bordure + ombre marquées) */
[data-theme="light"] .book-card {
  border: 1px solid rgba(30,48,80,0.16);
  box-shadow: 0 5px 20px rgba(30,48,80,0.16);
}
/* Le fond de l'écran (#FDFBF7) et la carte (#fff) étaient deux blancs :
   la carte ne se détachait pas. On assombrit le fond, pas la carte. */
[data-theme="light"] .books-body { background: #EFEAE0; }

/* Event card — blanche en light mode */
[data-theme="light"] .event-card {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(30,48,80,0.09);
}
[data-theme="light"] .event-card::before { display: none; }
[data-theme="light"] .event-title        { color: var(--navy); }
[data-theme="light"] .event-meta span    { color: rgba(30,48,80,0.60); }
[data-theme="light"] .event-desc         { color: rgba(30,48,80,0.70); }

/* Sheet événements */
[data-theme="light"] .evenements-sheet   { background: #FDFBF7; }

/* Q&R textes */
[data-theme="light"] .qr-q-text          { color: var(--navy); }
[data-theme="light"] .qr-a-text          { color: rgba(30,48,80,0.78); }
[data-theme="light"] .qr-author          { color: rgba(30,48,80,0.50); }

/* Timeline textes */
[data-theme="light"] .timeline-ctitle    { color: var(--navy); }
[data-theme="light"] .timeline-ctext     { color: rgba(30,48,80,0.70); }

/* Temoignages textes */
[data-theme="light"] .temo-card-title    { color: var(--navy); }
[data-theme="light"] .temo-card-teaser   { color: rgba(30,48,80,0.78); }
[data-theme="light"] .temo-card-text     { color: rgba(30,48,80,0.70); }
[data-theme="light"] .temo-author        { color: rgba(30,48,80,0.45); border-top-color: rgba(30,48,80,0.10); }
[data-theme="light"] .temo-photo-dflt-lbl { color: rgba(30,48,80,0.35); }

/* Plus tiles — légèrement chaudes */
[data-theme="light"] .plus-tile { background: #FFFFFF; box-shadow: 0 2px 10px rgba(30,48,80,0.07); }
[data-theme="light"] .plus-tile:active { background: #F5F9FF; }

/* 8. TEXTES GÉNÉRAUX ────────────────────────────────── */
[data-theme="light"] .greeting-text    { color: var(--navy); }
/* Sous-titres des headers : blancs par défaut → navy lisible en light */
[data-theme="light"] .screen-header p  { color: rgba(30,48,80,0.70) !important; }
[data-theme="light"] .screen-header h2 { color: var(--navy) !important; }
[data-theme="light"] .temo-hero p      { color: rgba(30,48,80,0.70) !important; }
[data-theme="light"] .temo-title       { color: var(--navy) !important; }
/* Labels de section : bien contrastés, lisibles */
[data-theme="light"] .section-title         { color: #0F2547; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
[data-theme="light"] .profil-section-label  { color: rgba(30,48,80,0.60); }
[data-theme="light"] .plus-section-label    { color: rgba(30,48,80,0.60); }
[data-theme="light"] .me-section-label      { color: rgba(30,48,80,0.60); }
[data-theme="light"] .communaute-section-label { color: rgba(30,48,80,0.60); }

/* ── Supprimer les icônes/badges décoratifs pour uniformiser les headers ──
   Toutes les pages secondaires adoptent le style compact du Plus (titre + sous-titre seulement) */
.communaute-hero-icon,
.questions-hero .q-icon,
.qr-hero-icon,
.temo-badge,
.temo-verse,
.temo-stats,
.parcours-badge,
.parcours-quote { display: none !important; }

/* ════════════════════════════════════════════════════════
   LIGHT MODE — CORRECTIONS COMPLÉMENTAIRES
═══════════════════════════════════════════════════════ */

/* ── Cartes Activités → style Vidéothèque ────────────── */
/* Cartes activités → identiques aux cartes Vidéothèque (.vid-row-item) + bordure claire */
[data-theme="light"] .activite-card {
  border: 1px solid rgba(30,48,80,0.10);
  border-left: 1px solid rgba(30,48,80,0.10);
  border-radius: 20px;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(38,70,109,0.07);
  padding: 12px;
  gap: 12px;
}
[data-theme="light"] .activite-card:active { background: var(--cream-dark); transform: scale(0.98); }
/* Cartes Vidéothèque → même bordure claire pour cohérence */
[data-theme="light"] .vid-row-item {
  border: 1px solid rgba(30,48,80,0.10);
}
[data-theme="light"] .activite-title  { color: #0F2547; }
[data-theme="light"] .activite-badge  { color: rgba(30,48,80,0.55); }
[data-theme="light"] .activite-desc   { color: rgba(30,48,80,0.65); }
[data-theme="light"] .activite-date   { color: rgba(30,48,80,0.45); }
[data-theme="light"] .activite-thumb  { background: rgba(30,48,80,0.07); }

/* ── Badge "Giorno X di 365" → outline light ─────────── */
[data-theme="light"] .rp-day-badge {
  background: #ffffff;
  color: var(--navy);
  border: 1.5px solid rgba(30,48,80,0.15);
  box-shadow: 0 1px 6px rgba(30,48,80,0.07);
}

/* ── Vidéothèque — titre de la carte en vedette ───────── */
/* Blanc, et pas navy : ce titre est écrit sur la vignette de la vidéo et sur
   un dégradé sombre, jamais sur le fond de page. */
[data-theme="light"] .vi-title  { color: #ffffff; }
[data-theme="light"] .vi-title-sm { color: #0F2547; }
[data-theme="light"] .vi-meta-sm  { color: rgba(30,48,80,0.50); }
[data-theme="light"] .vid-watch-btn { /* garde son style gold */ }

/* ── btn-primary (boutons principaux navy) → léger ────── */
[data-theme="light"] .btn-primary {
  background: var(--navy);
  color: var(--gold-light);
}

/* ── Barre de progression reading plan → ivory fond ───── */
[data-theme="light"] .rp-progress-wrap { background: rgba(30,48,80,0.08); }

/* ── Témoignages : supprimer le vert (couleur inline overridée) ── */
[data-theme="light"] .temo-expand-btn {
  color: var(--navy) !important;
  border-color: rgba(30,48,80,0.18) !important;
}
[data-theme="light"] .temo-cat {
  background: rgba(30,48,80,0.07) !important;
  color: var(--navy) !important;
}
[data-theme="light"] .temo-card {
  border-left-color: rgba(30,48,80,0.15) !important;
}

/* ── Profil : cartes encore sombres ─────────────────────── */
[data-theme="light"] .profil-cloud-card,
[data-theme="light"] .profil-auth-card,
[data-theme="light"] .profil-settings-card { background: #ffffff !important; }
[data-theme="light"] .profil-cloud-btn {
  background: linear-gradient(135deg, #FFF3D0 0%, #FFE5A0 100%) !important;
  color: var(--navy) !important;
  border: 1px solid rgba(240,160,64,0.25) !important;
}
[data-theme="light"] .profil-cloud-btn i { color: var(--gold-deep) !important; }

/* ── Icônes activités → pastille tonale Material (fond inline conservé) ── */
[data-theme="light"] .activite-thumb-dflt { opacity: 1; border-radius: 16px; }

/* Le titre de la carte en vedette est écrit SUR une image et sur un dégradé
   sombre : il reste blanc, en clair comme en sombre. Une règle posée ici
   le repeignait en navy — donc du navy sur du navy — et écrasait celle,
   correcte, déclarée plus haut avec cette même justification. Le titre était
   quasi illisible en thème clair, et la vignette de la vidéo n'a fait que
   rendre le défaut évident. Voir `.vi-title` et `[data-theme="light"]
   .vi-title` plus haut dans ce fichier. */

/* ── Badge "Organizzazione senza scopo di lucro" → navy  */
[data-theme="light"] .about-hero-badge {
  background: rgba(30,48,80,0.07);
  border: 1px solid rgba(30,48,80,0.12);
  color: var(--navy-light);
}

/* ── Premio Annuale → blanc cohérent ─────────────────── */
[data-theme="light"] .profil-reward-card {
  background: #ffffff;
  border: 1px solid rgba(30,48,80,0.08);
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
[data-theme="light"] .profil-reward-pct { color: var(--gold-deep); }

/* ── Sous-titres headers : navy pleine opacité ────────── */
/* Contraste minimal WCAG AA sur gradient #C8DFFE→#FFD8A8 : navy seul suffit */
[data-theme="light"] .plus-header-sub,
[data-theme="light"] .books-header-sub,
[data-theme="light"] .screen-header p,
[data-theme="light"] .screen-header h2,
[data-theme="light"] .temo-hero p,
[data-theme="light"] .qr-hero p,
[data-theme="light"] .parcours-sub,
[data-theme="light"] .communaute-hero-sub,
[data-theme="light"] .questions-hero p,
[data-theme="light"] .pg-hero-sub,
[data-theme="light"] .bible-page-sub,
[data-theme="light"] .bible-header p,
[data-theme="light"] .me-topbar-sub {
  color: #1e3050 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
[data-theme="light"] .screen-header h2 { opacity: 1 !important; }

/* ── "Messaggio del Giorno" — forme identique à Piano di Lettura ── */
[data-theme="light"] .msg-card-label {
  color: #0F2547 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
}
[data-theme="light"] .msg-card-label-icon { color: var(--gold-main); }

/* ── Auth profile section → blanc en light mode ───────── */
[data-theme="light"] .auth-profile-section {
  background: #ffffff !important;
  border: 1px solid rgba(30,48,80,0.08);
  box-shadow: 0 2px 14px rgba(30,48,80,0.08);
}
[data-theme="light"] .auth-name-input {
  background: rgba(30,48,80,0.05) !important;
  border-color: rgba(30,48,80,0.15) !important;
  color: var(--navy) !important;
}
[data-theme="light"] .auth-name-input::placeholder { color: rgba(30,48,80,0.35) !important; }
[data-theme="light"] .auth-profile-label  { color: rgba(30,48,80,0.50) !important; }
[data-theme="light"] .auth-profile-avatar {
  background: rgba(30,48,80,0.08) !important;
  border-color: rgba(30,48,80,0.18) !important;
  color: var(--navy) !important;
}

/* ── Icônes activités : pastille tonale Material ────────
   Le fond tonal (tinte de l'accent) vient du style inline ${style.tile}.
   On force seulement la forme + pleine opacité, pas la couleur. */
[data-theme="light"] .activite-thumb-dflt,
.activite-thumb-dflt {
  border-radius: 16px;
  opacity: 1;
  box-shadow: none;
}

/* ── Header accueil : aligné sur le style « Activités » en light ─── */
[data-theme="light"] .home-hero {
  background: linear-gradient(160deg, #C8DFFE 0%, #A8C8F0 45%, #FFD8A8 100%) !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%) !important;
}

/* ══════════════════════════════════════════
   ÉCRAN PRIÈRES
══════════════════════════════════════════ */
/* Le fond (light + dark) est géré avec les autres écrans Mon Espace
   plus bas (#FDFBF7 en light, dégradé navy→orange→sombre en dark).
   Le .me-topbar hérite automatiquement du dégradé pastel. */

/* ── Ancien .prieres-header conservé pour compatibilité ── */
.prieres-header {
  display: flex; align-items: center; gap: 8px;
  padding: 54px 14px 12px;
  background: white;
  border-bottom: 1px solid #ede8df;
  flex-shrink: 0;
}
[data-theme="dark"] .prieres-header { background: transparent; border-bottom-color: rgba(255,255,255,0.08); }
.prieres-header-title {
  flex: 1; text-align: center;
  font-size: 17px; font-weight: 800; color: var(--navy);
}
[data-theme="dark"] .prieres-header-title, [data-theme="dark"] .me-topbar-title { color: var(--gold-light); }
.prieres-add-btn {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--navy); padding: 4px 6px;
  border-radius: 8px; transition: background 0.15s;
}
.prieres-add-btn:active { background: rgba(30,48,80,0.08); }
[data-theme="dark"] .prieres-add-btn { color: rgba(255,255,255,0.8); }

.prieres-stats-bar {
  display: flex; align-items: center; justify-content: space-around;
  padding: 14px 20px; background: transparent; flex-shrink: 0;
}

.pstat { text-align: center; flex: 1; }
.pstat-num { font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1; }
[data-theme="dark"] .pstat-num { color: #fff; }
.pstat-gold { color: #d4a017 !important; }
.pstat-lbl { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.pstat-divider { width: 1px; height: 36px; background: #ede8df; }
[data-theme="dark"] .pstat-divider { background: rgba(255,255,255,0.12); }

.prieres-filters {
  display: flex; gap: 6px; padding: 10px 14px 12px;
  background: transparent; flex-shrink: 0;
}

.pfilt {
  flex: 1; padding: 6px 4px; border: 1.5px solid #ddd;
  border-radius: 20px; background: white; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #888; transition: all 0.15s;
}
.pfilt.active {
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy); border-color: transparent;
  box-shadow: 0 2px 8px rgba(212,160,23,0.3);
}
[data-theme="dark"] .pfilt { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
[data-theme="dark"] .pfilt.active {
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy); border-color: transparent;
}

/* ── Journal de Prière : catégories ──────────────────────── */
/* Bouton export dans le topbar (haut-droite, symétrique du retour) */
.me-export-btn {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.22); border: none; color: #fff;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 111; transition: background 0.15s;
}
.me-export-btn:active { background: rgba(255,255,255,0.35); }
[data-theme="light"] .me-export-btn { background: rgba(30,48,80,0.10); color: var(--navy); }
[data-theme="light"] .me-export-btn:active { background: rgba(30,48,80,0.20); }

/* Filtre par catégorie : menu déroulant (pas de puces qui se coupent) */
.prieres-cat-filterbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px 12px; flex-shrink: 0;
}
.prieres-cat-funnel { color: var(--navy-light, #888); font-size: 14px; flex-shrink: 0; }
.prieres-cat-dropdown {
  flex: 1; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;
  border: 1.5px solid #ddd; background: white; color: var(--navy); cursor: pointer;
}
[data-theme="dark"] .prieres-cat-funnel { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .prieres-cat-dropdown {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: #fff;
}
[data-theme="dark"] .prieres-cat-dropdown option { background: #1a2744; color: #fff; }

/* ── Prière vocale (enregistrement audio local) ── */
.priere-rec { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.priere-rec-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 22px; cursor: pointer;
  border: 1.5px solid var(--gold-main, #f0a040);
  background: transparent; color: var(--navy); font-size: 13px; font-weight: 700;
  transition: all 0.15s;
}
.priere-rec-btn.recording { background: #d33; border-color: #d33; color: #fff; animation: recpulse 1.1s infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.priere-rec-time { font-size: 13px; font-weight: 700; color: #d33; font-variant-numeric: tabular-nums; }
.priere-rec-icon {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 1.5px solid var(--cream-dark, #e0d8c8); background: var(--cream, #faf7f0);
  color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.priere-rec-del { color: #c0392b; }
[data-theme="dark"] .priere-rec-btn { color: #fff; }
[data-theme="dark"] .priere-rec-icon { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
[data-theme="dark"] .priere-rec-del { color: #ff8a80; }
.priere-audio-btn { color: var(--gold-deep, #d4845a); }
[data-theme="dark"] .priere-audio-btn { color: var(--gold-light, #f5c060); }

/* ── Partage au groupe + Mur de prière communautaire ── */
.priere-share-btn { color: #3b6fb0; }
[data-theme="dark"] .priere-share-btn { color: #7da9e0; }
.pwall-share-subject {
  font-weight: 700; color: var(--navy); background: var(--cream, #faf7f0);
  border-radius: 10px; padding: 9px 12px; margin: 4px 0 10px; font-size: 14px;
}
[data-theme="dark"] .pwall-share-subject { background: rgba(255,255,255,0.07); color: #fff; }
.pwall-consent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 2px 6px; font-size: 12px; color: var(--navy-light); line-height: 1.4; cursor: pointer; }
.pwall-consent input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--gold-main, #f0a040); }
[data-theme="dark"] .pwall-consent { color: rgba(255, 255, 255, 0.7); }

/* Mur de prière = écran standard (header me-topbar + footer bottom-nav) */
/* flex:1 → le corps remplit la hauteur et pousse le footer tout en bas */
.pwall-body { flex: 1; overflow-y: auto; padding: 16px; }

/* ══ Session de prière live ══ */
.me-icon-red { background: linear-gradient(135deg, #e05a4a, #c0392b); }
.live-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#live-main-view, #live-replay-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#live-replay-view { overflow-y: auto; padding: 14px 16px 20px; }

.live-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px 24px; text-align: center; }
.live-empty i { font-size: 44px; color: var(--navy-light, #9aa7bd); }
.live-empty p { color: var(--navy-light, #6b7a90); font-size: 14px; }
.live-cta { background: linear-gradient(135deg, #e05a4a, #c0392b); color: #fff; border: none; border-radius: 14px; padding: 12px 22px; font-weight: 800; font-size: 14px; cursor: pointer; }
.live-replay-link, .live-back-link { background: none; border: none; color: var(--navy-light, #5a6a80); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

.live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cream-dark, #eee); flex-shrink: 0; }
.live-theme { font-weight: 800; font-size: 15px; color: var(--navy); }
.live-timer { font-weight: 800; font-size: 19px; color: var(--gold-deep, #c0392b); font-variant-numeric: tabular-nums; }
.live-timer-end { color: var(--navy-light); font-size: 14px; }

.live-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.live-feed-replay { padding: 12px 0 0; }
.live-loading, .live-feed-empty { text-align: center; color: var(--navy-light); font-size: 13px; padding: 24px; }
.live-msg { background: #fff; border-radius: 14px; padding: 9px 12px; box-shadow: 0 1px 6px rgba(30,48,80,0.07); }
.live-msg-who { font-size: 11px; font-weight: 700; color: var(--gold-deep, #c0392b); }
.live-msg-text { font-size: 14px; color: var(--navy); line-height: 1.45; margin: 2px 0 7px; }
.live-msg-reacts { display: flex; gap: 8px; }
.live-msg-reacts-static { font-size: 12px; color: var(--navy-light); margin-top: 4px; }
.live-react { background: transparent; border: 1.5px solid var(--cream-dark, #ddd); border-radius: 14px; padding: 3px 11px; font-size: 12px; font-weight: 600; color: var(--navy); cursor: pointer; }
.live-react.on { background: rgba(245,192,96,0.25); border-color: var(--gold-main); }

.live-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cream-dark, #eee); flex-shrink: 0; }
.live-input { flex: 1; padding: 10px 14px; border-radius: 22px; border: 1.5px solid var(--cream-dark, #ddd); font-size: 14px; background: #fff; color: var(--navy); }
.live-send { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--gold-main), var(--amber)); color: #fff; font-size: 16px; cursor: pointer; }
.live-end { margin: 0 12px 10px; background: none; border: 1.5px solid #c0392b; color: #c0392b; border-radius: 12px; padding: 9px; font-weight: 700; font-size: 13px; cursor: pointer; flex-shrink: 0; }

.live-replay-title { font-weight: 800; font-size: 16px; color: var(--navy); margin: 10px 0 12px; }
.live-replay-item { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--cream-dark, #eee); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.live-replay-theme { font-weight: 700; font-size: 14px; color: var(--navy); }
.live-replay-date { font-size: 12px; color: var(--navy-light); margin-top: 2px; }

/* ── Live : thème sombre ── */
[data-theme="dark"] .live-empty p, [data-theme="dark"] .live-loading, [data-theme="dark"] .live-feed-empty { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .live-head { border-bottom-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .live-theme, [data-theme="dark"] .live-msg-text, [data-theme="dark"] .live-react, [data-theme="dark"] .live-replay-theme, [data-theme="dark"] .live-replay-title { color: #fff; }
[data-theme="dark"] .live-msg, [data-theme="dark"] .live-replay-item { background: #1c2537; box-shadow: none; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .live-react { border-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .live-input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
[data-theme="dark"] .live-compose, [data-theme="dark"] .live-end { border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .live-msg-reacts-static, [data-theme="dark"] .live-replay-date, [data-theme="dark"] .live-back-link, [data-theme="dark"] .live-replay-link { color: rgba(255,255,255,0.55); }
.live-translate-btn { background: none; border: none; color: var(--navy-light, #6b7a90); font-size: 11px; cursor: pointer; padding: 1px 0 5px; display: inline-flex; align-items: center; gap: 3px; }
.live-translate-btn:disabled { opacity: .5; cursor: default; }
[data-theme="dark"] .live-translate-btn { color: rgba(255,255,255,0.45); }
.pwall-loading, .pwall-empty { text-align: center; color: var(--navy-light); padding: 40px 20px; }
.pwall-empty i { font-size: 44px; opacity: 0.25; display: block; margin-bottom: 12px; }
[data-theme="dark"] .pwall-loading, [data-theme="dark"] .pwall-empty { color: rgba(255, 255, 255, 0.55); }
.pwall-card { background: white; border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 3px 14px rgba(30, 48, 80, 0.08); }
[data-theme="dark"] .pwall-card { background: #1C2537; }
.pwall-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pwall-cat { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 12px; background: color-mix(in srgb, var(--cat, #888) 16%, transparent); color: var(--cat, #888); }
.pwall-author { font-size: 11px; color: var(--navy-light); font-weight: 600; }
[data-theme="dark"] .pwall-author { color: rgba(255, 255, 255, 0.5); }
.pwall-titre { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
[data-theme="dark"] .pwall-titre { color: #fff; }
.pwall-detail { font-size: 13px; color: var(--navy-light); line-height: 1.55; margin-bottom: 10px; }
[data-theme="dark"] .pwall-detail { color: rgba(255, 255, 255, 0.7); }
.pwall-pray-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--gold-main, #f0a040); background: transparent;
  color: var(--gold-deep, #d4845a); border-radius: 20px; padding: 7px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.pwall-pray-btn.prayed { background: var(--gold-main, #f0a040); color: #fff; border-color: transparent; }
[data-theme="dark"] .pwall-pray-btn { color: var(--gold-light, #f5c060); }
[data-theme="dark"] .pwall-pray-btn.prayed { color: #1a2744; }

/* Modération admin des prières partagées */
.admin-pcard { background: white; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(30, 48, 80, 0.07); }
[data-theme="dark"] .admin-pcard { background: #1C2537; }
.admin-pcard-actions { display: flex; gap: 10px; margin-top: 12px; }
.admin-approve-btn, .admin-reject-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.admin-approve-btn { background: linear-gradient(135deg, #2e9e5b, #1a7f37); color: #fff; }
.admin-reject-btn { background: var(--cream, #f4eee3); color: #c0392b; border: 1.5px solid rgba(192, 57, 43, 0.3); }
[data-theme="dark"] .admin-reject-btn { background: rgba(255, 255, 255, 0.06); color: #ff8a80; border-color: rgba(255, 138, 128, 0.3); }

/* ── Mur de prière : requêtes + intercessions + enregistreur ── */
.pwall-card { cursor: pointer; transition: transform 0.12s; }
.pwall-card:active { transform: scale(0.985); }
.pwall-int-count { font-size: 11px; color: var(--gold-deep, #c8902a); font-weight: 700; }
.pwall-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gold-deep, #c8902a); }
[data-theme="dark"] .pwall-int-count, [data-theme="dark"] .pwall-card-cta { color: var(--gold-light, #f5c060); }

/* Bouton flottant « déposer une requête » */
.pwall-fab {
  position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  width: 54px; height: 54px; border-radius: 50%; border: none; z-index: 50;
  background: linear-gradient(135deg, var(--gold-main), var(--amber)); color: #fff; font-size: 24px;
  box-shadow: 0 6px 18px rgba(240, 160, 64, 0.45); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pwall-fab:active { transform: scale(0.93); }
.pwall-empty-btn {
  margin-top: 14px; border: none; border-radius: 12px; padding: 11px 18px; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-main), var(--amber)); color: #fff; font-weight: 800; font-size: 13px;
}

/* Détail d'une requête (modal) */
.pwdetail-author { font-size: 12px; color: var(--navy-light); font-weight: 700; margin-bottom: 4px; }
.pwdetail-text { font-size: 15px; color: var(--navy); line-height: 1.6; margin-bottom: 14px; }
.pwdetail-inters-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gold-deep, #c8902a); margin-bottom: 8px; }
.pwdetail-inters { max-height: calc(38 * var(--vh)); overflow-y: auto; margin-bottom: 6px; }
.pwdetail-noint { font-size: 13px; color: var(--navy-light); font-style: italic; padding: 6px 0 10px; }
[data-theme="dark"] .pwdetail-author, [data-theme="dark"] .pwdetail-noint { color: rgba(255, 255, 255, 0.55); }
[data-theme="dark"] .pwdetail-text { color: #fff; }

/* Carte d'intercession (avec audio) */
.pwinter-card { background: var(--cream, #f7f2e9); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
[data-theme="dark"] .pwinter-card { background: rgba(255, 255, 255, 0.06); }
.pwinter-who { font-size: 11px; font-weight: 700; color: var(--gold-deep, #c8902a); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.pwinter-text { font-size: 13px; color: var(--navy); line-height: 1.5; margin-bottom: 6px; }
[data-theme="dark"] .pwinter-text { color: rgba(255, 255, 255, 0.85); }
.pwinter-audio, .rec-audio { width: 100%; height: 38px; margin-top: 4px; }

/* ── Suivre les pages, bas de l'accueil ──────────────────────────
   Volontairement discret : ce n'est pas le sujet de l'écran. Deux icônes,
   pas deux boutons pleins comme dans la Vidéothèque — l'accueil porte déjà
   le message du jour et deux bandeaux. */
.home-suivre {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--cream-dark, #e8e0d4);
}
.home-suivre-label {
  flex: 1; min-width: 0;
  color: var(--navy-light, #4a5c7a);
  font-size: 12px; font-weight: 800;
}
/* 44 px : la cible tactile minimale d'Apple. Une icône seule tient dans
   moins, mais on ne rend pas un lien plus difficile à viser parce qu'il est
   discret. */
.home-suivre-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  color: #fff; font-size: 18px; text-decoration: none;
}
.home-suivre-yt { background: #c4302b; }
.home-suivre-tt { background: #111; }
.home-suivre-btn:hover { filter: brightness(1.12); }
.home-suivre-btn:focus-visible { outline: 3px solid var(--gold-main, #f5c060); outline-offset: 2px; }
[data-theme="dark"] .home-suivre { border-top-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .home-suivre-label { color: rgba(255, 255, 255, 0.66); }
[data-theme="dark"] .home-suivre-tt { background: #2b2b2b; }

/* ── Service de réveil du vendredi (bandeau d'accueil) ───────────
   Deux états, deux couleurs. AMBRE tant que la prière approche : c'est un
   avertissement, il doit attirer l'œil sans alarmer. ROUGE une fois
   commencée, et le battement s'arrête — il n'y a plus rien à anticiper, la
   couleur suffit à dire que ça se passe maintenant. */
.reveil-banner {
  border: 1.5px solid rgba(230, 168, 50, 0.65);
  background: rgba(245, 192, 96, 0.16);
}
.reveil-banner .activite-notif-icon { color: var(--gold-deep, #c8902a); }
.reveil-banner .activite-notif-badge { color: var(--gold-deep, #c8902a); }
/* Le battement dure : contrairement au bouton d'écoute, qui s'arrête après
   trois pulsations, celui-ci accompagne une attente d'une heure. Il reste
   donc lent et discret — 2,4 s — pour ne pas devenir une gêne. */
@keyframes reveil-battement {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 168, 50, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(230, 168, 50, 0.28); }
}
.reveil-banner:not(.reveil-encours) { animation: reveil-battement 2.4s ease-in-out infinite; }
.reveil-encours {
  border-color: rgba(192, 57, 43, 0.65);
  background: rgba(224, 83, 58, 0.14);
  animation: none;
}
.reveil-encours .activite-notif-icon,
.reveil-encours .activite-notif-badge { color: #c0392b; }
[data-theme="dark"] .reveil-banner { background: rgba(245, 192, 96, 0.13); }
[data-theme="dark"] .reveil-encours { background: rgba(224, 83, 58, 0.18); }
[data-theme="dark"] .reveil-encours .activite-notif-icon,
[data-theme="dark"] .reveil-encours .activite-notif-badge { color: #ff9382; }
/* Réglage système « réduire les animations » : le battement disparaît, le
   contraste du cadre le remplace. */
@media (prefers-reduced-motion: reduce) {
  .reveil-banner:not(.reveil-encours) {
    animation: none;
    border-color: var(--gold-deep, #c8902a);
  }
}

/* ── Suivre les pages YouTube / TikTok (Vidéothèque) ─────────────
   Posé sous l'en-tête sombre, au-dessus de la liste : on tombe dessus en
   arrivant, sans avoir à faire défiler toutes les prédications. Les couleurs
   sont celles des plateformes — on les reconnaît avant de lire. */
.suivre-box {
  margin: 12px 16px 4px;
  padding: 14px;
  border: 1px solid var(--cream-dark, #e8e0d4);
  border-radius: 14px;
  background: var(--cream, #f4eee3);
}
.suivre-titre {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  color: var(--navy, #1e3050);
  font-size: 13px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.suivre-titre i { color: var(--gold-deep, #c8902a); }
/* Une colonne sous 360 px : côte à côte, « S'abonner sur YouTube » se
   tronquerait sur les petits téléphones. */
.suivre-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.suivre-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 150px; min-height: 44px; /* cible tactile d'Apple */
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 800;
}
.suivre-yt { background: #c4302b; }
.suivre-tt { background: #111; }
.suivre-btn:hover { filter: brightness(1.12); }
.suivre-btn:focus-visible { outline: 3px solid var(--gold-main, #f5c060); outline-offset: 2px; }
.suivre-btn i { font-size: 16px; }
.suivre-note {
  margin-top: 9px;
  color: var(--navy-light, #4a5c7a);
  font-size: 11.5px; line-height: 1.4;
}
[data-theme="dark"] .suivre-box {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .suivre-titre { color: rgba(255, 255, 255, 0.9); }
[data-theme="dark"] .suivre-note { color: rgba(255, 255, 255, 0.66); }
/* Le noir de TikTok disparaît sur fond sombre : on l'éclaircit juste assez
   pour que le bouton garde un bord visible. */
[data-theme="dark"] .suivre-tt { background: #2b2b2b; }

/* Enregistreur vocal */
.pw-recbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 10px; }
.rec-btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.rec-start { background: var(--navy); color: var(--gold-light); }
.rec-stop { background: linear-gradient(135deg, #e0533a, #c0392b); color: #fff; }
.rec-clear { background: var(--cream, #f4eee3); color: var(--navy-light); border: 1.5px solid var(--cream-dark, #e8e0d4); }
.rec-play  { background: linear-gradient(135deg, var(--gold-main, #f5c060), var(--amber, #e6a832)); color: var(--navy, #1e3050); }
[data-theme="dark"] .rec-clear { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .rec-play  { color: var(--navy, #1e3050); }
.rec-time { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #c0392b; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0533a; animation: recPulse 1s infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Vue d'ensemble des voix déposées (écran admin) ──────────────
   Une ligne par jour, marquée d'un micro quand une voix existe dans la
   langue choisie. Sans elle, l'admin interrogeait une date à la fois. */
.admin-voice-liste { margin: 14px 0 4px; }
.av-jour {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px;
  padding: 8px 10px;
  border: none; border-bottom: 1px solid var(--cream-dark, #e8e0d4);
  background: none;
  color: var(--navy, #1e3050);
  font-family: inherit; font-size: 13px; text-align: left;
  cursor: pointer;
}
.av-jour:hover { background: rgba(245, 192, 96, 0.12); }
.av-jour:focus-visible { outline: 2px solid var(--gold-main, #f5c060); outline-offset: -2px; }
/* Le jour sélectionné : le repère se perd sinon dès qu'on fait défiler. */
.av-jour-actuel { background: rgba(245, 192, 96, 0.18); font-weight: 800; }
.av-jour-marque { width: 20px; flex: none; text-align: center; }
.av-jour-date { flex: none; font-variant-numeric: tabular-nums; opacity: 0.75; }
/* Le titre cède la place en premier : la date et la marque sont ce qu'on
   cherche, le titre ne sert qu'à reconnaître le jour. */
.av-jour-titre {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="dark"] .av-jour { color: rgba(255, 255, 255, 0.86); border-bottom-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .av-jour:hover { background: rgba(245, 192, 96, 0.16); }
[data-theme="dark"] .av-jour-actuel { background: rgba(245, 192, 96, 0.22); }

/* Dépôt de la voix du message du jour (écran admin) — réutilise les boutons
   .rec-* de l'enregistreur du mur de prière. */
.admin-voice-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
.admin-voice-state { font-size: 12.5px; font-weight: 700; margin: 2px 2px 8px; line-height: 1.4; }

/* ── Suppression réservée à l'admin ──────────────────────────────
   Corbeille posée sur les cartes du mur PUBLIC (elle n'existe pas pour les
   autres visiteurs), et vidage complet depuis l'écran de modération. Le
   rouge n'est pas décoratif : ces deux actions sont sans retour, et elles
   voisinent avec des boutons qui, eux, ne détruisent rien. */
.pwall-del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 32 px de cible : assez pour le doigt, assez petit pour ne pas dominer
     une carte dont l'action principale reste « Intercéder ». */
  width: 32px; height: 32px; margin-left: auto;
  border: none; border-radius: 9px;
  background: rgba(192, 57, 43, 0.10);
  color: #c0392b;
  font-size: 14px; cursor: pointer;
}
.pwall-del-btn:hover { background: rgba(192, 57, 43, 0.20); }
.pwall-del-btn:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }
[data-theme="dark"] .pwall-del-btn { background: rgba(224, 83, 58, 0.18); color: #ff9382; }

.pwall-vider-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 32px); min-height: 44px;
  margin: 4px 16px 12px;
  padding: 10px 16px;
  border: 1.5px solid rgba(192, 57, 43, 0.45);
  border-radius: 12px;
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  cursor: pointer;
}
.pwall-vider-btn:hover { background: rgba(192, 57, 43, 0.16); }
.pwall-vider-btn:disabled { opacity: 0.55; cursor: progress; }
.pwall-vider-btn:focus-visible { outline: 3px solid #c0392b; outline-offset: 2px; }
[data-theme="dark"] .pwall-vider-btn {
  border-color: rgba(255, 147, 130, 0.45);
  background: rgba(224, 83, 58, 0.14);
  color: #ff9382;
}

/* Modération admin : sections, édition, états */
.admin-sec-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold-deep, #c8902a); margin: 16px 2px 8px; }
.admin-edit-ta {
  width: 100%; box-sizing: border-box; border-radius: 10px; padding: 9px 11px; font-size: 13px;
  border: 1.5px solid var(--cream-dark, #e8e0d4); background: white; color: var(--navy); resize: vertical; min-height: 46px;
}
[data-theme="dark"] .admin-edit-ta { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.admin-save-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--navy); color: var(--gold-light); }
.admin-badge-state { font-size: 10px; font-weight: 700; color: var(--navy-light); }
[data-theme="dark"] .admin-badge-state { color: rgba(255, 255, 255, 0.5); }
.admin-int-for { font-size: 11px; color: var(--navy-light); font-style: italic; margin: 6px 0; display: flex; align-items: center; gap: 5px; }
[data-theme="dark"] .admin-int-for { color: rgba(255, 255, 255, 0.5); }
.admin-pcard-ok { opacity: 0.82; }

/* ── Journal : rappel quotidien + date sur la carte ── */
.priere-reminder-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.priere-reminder-row > i { color: var(--gold-deep, #c8902a); font-size: 16px; }
.priere-reminder-time { flex: 1; }
.priere-created { color: var(--navy-light); opacity: 0.85; }
[data-theme="dark"] .priere-created { color: rgba(255, 255, 255, 0.45); }
.priere-reminder { color: var(--gold-deep, #c8902a); font-weight: 600; }
[data-theme="dark"] .priere-reminder { color: var(--gold-light, #f5c060); }

/* Puce de catégorie sur la carte */
.priere-cat-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--cat, #6b7280) 16%, transparent);
  color: var(--cat, #6b7280);
  border: 1px solid color-mix(in srgb, var(--cat, #6b7280) 35%, transparent);
}
[data-theme="dark"] .priere-cat-tag {
  background: color-mix(in srgb, var(--cat, #6b7280) 28%, transparent);
  color: color-mix(in srgb, var(--cat, #6b7280) 75%, #fff);
  border-color: color-mix(in srgb, var(--cat, #6b7280) 45%, transparent);
}

/* Sélecteur de catégorie dans le modal */
.priere-cat-label { font-size: 12px; font-weight: 700; color: #888; margin: 2px 0 6px; }
[data-theme="dark"] .priere-cat-label { color: rgba(255,255,255,0.6); }
.priere-cat-select { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.priere-cat-chip {
  padding: 6px 12px; border-radius: 16px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  border: 1.5px solid color-mix(in srgb, var(--cat, #6b7280) 45%, transparent);
  background: transparent; color: var(--cat, #6b7280); transition: all 0.15s;
}
.priere-cat-chip.active { background: var(--cat, #6b7280); color: #fff; border-color: transparent; }
[data-theme="dark"] .priere-cat-chip { color: color-mix(in srgb, var(--cat, #6b7280) 78%, #fff); }
[data-theme="dark"] .priere-cat-chip.active { color: #fff; }

.prieres-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 14px 80px; -webkit-overflow-scrolling: touch;
}

.priere-card {
  background: white; border-radius: 14px; margin-bottom: 10px;
  overflow: hidden; box-shadow: 0 1px 6px rgba(30,48,80,0.07);
  transition: transform 0.12s;
}
.priere-card:active { transform: scale(0.99); }
[data-theme="dark"] .priere-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); }

/* ── Cartes gold en LIGHT mode (style "Rejoindre l'événement") ── */
[data-theme="light"] .priere-card {
  background: #ffffff;
  border: 1.5px solid #e8ecf2;
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
[data-theme="light"] .priere-titre   { color: var(--navy); }
[data-theme="light"] .priere-detail  { color: rgba(30,48,80,0.78); }
[data-theme="light"] .priere-meta span { color: rgba(30,48,80,0.6); }
[data-theme="light"] .priere-check   { color: rgba(30,48,80,0.45); }
[data-theme="light"] .priere-check.priere-checked { color: #1e7a3d; }
[data-theme="light"] .priere-edit-btn { color: rgba(30,48,80,0.6); }
[data-theme="light"] .priere-del-btn  { color: #b3392e; }
[data-theme="light"] .priere-pried-today { color: #1e7a3d !important; }
[data-theme="light"] .priere-answer-note { color: var(--navy); }
/* Bouton "Marquer comme exaucée" : doré saturé (contraste avec le corps doré clair) */
[data-theme="light"] .priere-exaucee-btn {
  border-top-color: rgba(180,130,20,0.40);
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy);
}
[data-theme="light"] .priere-exaucee-btn:active { opacity: 0.88; }
.priere-answered {
  border: 1.5px solid rgba(212,160,23,0.4);
  background: linear-gradient(135deg, #fffbf0, #fff8e8) !important;
}
[data-theme="dark"] .priere-answered { background: rgba(212,160,23,0.12) !important; border-color: rgba(212,160,23,0.35); }
.priere-answered-badge {
  background: linear-gradient(135deg, #d4a017, #f5c060); color: white;
  font-size: 10px; font-weight: 800; padding: 4px 12px; letter-spacing: 0.5px;
}
.priere-card-main { display: flex; align-items: flex-start; gap: 10px; padding: 12px; }

.priere-check {
  background: none; border: none; cursor: pointer;
  font-size: 22px; flex-shrink: 0; padding: 2px;
  color: #ccc; transition: color 0.2s, transform 0.15s; margin-top: 1px;
}
.priere-check.priere-checked { color: #4caf50; }
.priere-check:active { transform: scale(1.2); }

.priere-card-body { flex: 1; min-width: 0; }
.priere-titre { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 3px; }
[data-theme="dark"] .priere-titre { color: rgba(255,255,255,0.92); }
.priere-titre-done { text-decoration: line-through; opacity: 0.6; }
.priere-detail { font-size: 12px; color: #888; line-height: 1.4; margin-bottom: 4px; }
.priere-answer-note { font-size: 11px; color: #d4a017; font-style: italic; margin-top: 4px; }
.priere-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.priere-meta span { font-size: 10px; color: #aaa; display: flex; align-items: center; gap: 3px; }
.priere-pried-today { color: #4caf50 !important; font-weight: 600; }
.priere-exaucee-date { color: #d4a017 !important; }

.priere-card-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.priere-action-btn {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.priere-answer-btn { color: #d4a017; }
.priere-edit-btn   { color: #888; }
.priere-del-btn    { color: #e57373; }
.priere-action-btn:active { background: rgba(0,0,0,0.06); }

.prieres-empty { text-align: center; padding: 60px 20px; color: #bbb; }
.prieres-empty p { font-size: 14px; margin-bottom: 16px; }
.prieres-empty-btn {
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy); border: none; border-radius: 22px;
  padding: 10px 22px; font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 10px rgba(212,160,23,0.3);
}

.prieres-fab {
  position: absolute; bottom: 80px; right: 18px;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy); border: none; font-size: 22px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(212,160,23,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s; z-index: 10;
}
.prieres-fab:active { transform: scale(0.93); box-shadow: 0 2px 8px rgba(212,160,23,0.25); }

.prieres-modal-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px); z-index: 200;
  display: none; align-items: flex-end; padding-bottom: 0;
}
.prieres-modal-bg.open { display: flex; }
.prieres-modal {
  background: white; border-radius: 20px 20px 0 0;
  padding: 22px 20px 36px; width: 100%;
  animation: slideUp 0.25s ease;
}
[data-theme="dark"] .prieres-modal { background: #1a2744; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.prieres-modal-title {
  font-size: 17px; font-weight: 800; color: var(--navy);
  margin-bottom: 16px; text-align: center;
}
[data-theme="dark"] .prieres-modal-title { color: var(--gold-light); }
.prieres-modal-note { font-size: 12px; color: #888; text-align: center; margin-bottom: 12px; }
.prieres-modal-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid #ddd;
  border-radius: 10px; font-size: 14px; font-family: inherit;
  margin-bottom: 10px; box-sizing: border-box; outline: none; color: var(--navy);
}
[data-theme="dark"] .prieres-modal-input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.prieres-modal-textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid #ddd;
  border-radius: 10px; font-size: 13px; font-family: inherit;
  margin-bottom: 16px; box-sizing: border-box; resize: none;
  outline: none; color: var(--navy); line-height: 1.5;
}
[data-theme="dark"] .prieres-modal-textarea { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.prieres-modal-input:focus, .prieres-modal-textarea:focus { border-color: var(--navy); }
.prieres-modal-actions { display: flex; gap: 10px; }
.prieres-modal-cancel {
  flex: 1; padding: 11px; border: 1.5px solid #ddd;
  border-radius: 10px; background: white; color: #888;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
[data-theme="dark"] .prieres-modal-cancel { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
.prieres-modal-save {
  flex: 2; padding: 11px; border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy);
  font-size: 14px; font-weight: 800; cursor: pointer;
}
.prieres-modal-gold {
  background: linear-gradient(135deg, #d4a017, #f5c060) !important;
  color: var(--navy) !important;
}

/* Bouton "Marquer comme exaucée" — visible en bas de carte */
.priere-exaucee-btn {
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid rgba(212,160,23,0.25);
  background: rgba(212,160,23,0.06);
  color: #c49010;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s;
  border-radius: 0 0 14px 14px;
}
.priere-exaucee-btn:active { background: rgba(212,160,23,0.18); }
[data-theme="dark"] .priere-exaucee-btn {
  border-top-color: rgba(212,160,23,0.2);
  background: rgba(212,160,23,0.08);
  color: #f5c060;
}

/* Stats bar + filtres — transparents en dark : le dégradé de la page
   les traverse pour une transition fluide avec le header */
[data-theme="dark"] .prieres-stats-bar,
[data-theme="dark"] .prieres-filters { background: transparent; }
[data-theme="dark"] .pstat-lbl { color: rgba(255,255,255,0.4); }

/* Liste — dark mode */
[data-theme="dark"] .priere-detail { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .priere-meta span { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .priere-action-btn.priere-edit-btn { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .prieres-empty { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .prieres-empty-btn { background: var(--gold-main); color: var(--navy); }

/* Modal — dark mode placeholder */
[data-theme="dark"] .prieres-modal-input::placeholder,
[data-theme="dark"] .prieres-modal-textarea::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .prieres-modal-note { color: rgba(255,255,255,0.4); }

/* Section réponse Questions (ntfy) */
.q-reply-card {
  background: white; border-radius: 14px; padding: 14px;
  border: 1.5px solid #ede8df; box-shadow: 0 1px 6px rgba(30,48,80,0.06);
}
.q-reply-answered { border-color: rgba(212,160,23,0.4); background: #fffbf0; }
.q-reply-label {
  font-size: 11px; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.q-reply-text { font-size: 14px; color: #333; line-height: 1.5; font-style: italic; }
.q-pending-text {
  font-size: 13px; color: #888; line-height: 1.5;
  margin-bottom: 12px; display: flex; align-items: flex-start; gap: 6px;
}
.q-check-btn {
  width: 100%; padding: 10px; border: none; border-radius: 10px;
  background: var(--navy); color: white; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* Bouton « J'ai lu » → archive la réponse (la carte disparaît de la page Questions) */
.q-reply-dismiss-btn {
  width: 100%; margin-top: 12px; padding: 9px;
  border: 1px solid rgba(212,160,23,0.45); border-radius: 10px;
  background: rgba(212,160,23,0.10); color: #c49010;
  font-size: 12px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s;
}
.q-reply-dismiss-btn:active { background: rgba(212,160,23,0.22); }
[data-theme="dark"] .q-reply-dismiss-btn {
  border-color: rgba(245,192,96,0.4); background: rgba(245,192,96,0.12); color: #f5c060;
}
/* Carte « Réponse du Serviteur » en thème sombre : carte foncée, label or,
   texte clair — au lieu de la carte crème qui jurait avec le fond sombre. */
[data-theme="dark"] .q-reply-card {
  background: #1C2537; border-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 18px rgba(0,0,0,0.30);
}
[data-theme="dark"] .q-reply-answered {
  background: rgba(245,192,96,0.08); border-color: rgba(245,192,96,0.35);
}
[data-theme="dark"] .q-reply-label   { color: var(--gold-light, #f5c060); }
[data-theme="dark"] .q-reply-text    { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .q-pending-text  { color: rgba(255,255,255,0.6); }

/* Couleur icône Prières (indigo) */
.me-icon-indigo {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
}
/* Icône admin (gold) */
.me-icon-gold {
  background: linear-gradient(135deg, var(--gold-main), var(--amber)) !important;
  color: var(--navy) !important;
}
/* Badge nombre de questions en attente sur la carte admin */
.me-admin-badge { display: none; }

/* ── REQUÊTES DE PRIÈRE — écran prayer-requests ──────────── */
.pr-icon-ring {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: #fff;
  margin: 0 auto 12px;
  box-shadow: 0 4px 16px rgba(118,75,162,0.3);
}
/* Bandeau titre + verset du message du jour */
.pr-msg-banner {
  padding: 10px 16px 12px;
  background: rgba(30,48,80,0.04);
  border-bottom: 1px solid rgba(30,48,80,0.07);
}
.pr-msg-banner-title {
  font-size: 14px; font-weight: 700;
  color: var(--navy, #1a2744);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-msg-banner-verse {
  font-size: 12px; font-style: italic;
  color: var(--navy-light, #7a8399); margin-top: 2px;
}
/* Barre admin — édition + publication */
.pr-admin-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  background: rgba(200,144,42,0.10);
  border-bottom: 1px solid rgba(200,144,42,0.22);
  font-size: 12px; color: var(--gold-deep, #c8962a);
  font-weight: 600;
}
.pr-publish-btn {
  background: linear-gradient(135deg, var(--gold-deep,#c8962a), var(--amber,#e8a52a));
  color: #fff; border: none; border-radius: 20px;
  padding: 6px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
/* Corps scrollable */
.pr-screen-body-2 {
  overflow-y: auto; flex: 1;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 72px);
  background: var(--bg, #f5f0e8);
}
/* Liste */
.pr-list { list-style: none; padding: 0; margin: 0 0 8px; }
.pr-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(30,48,80,0.04);
  margin-bottom: 8px;
  font-size: 13.5px; color: var(--navy, #1a2744); line-height: 1.55;
}
.pr-item-emoji { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.pr-item-text  { flex: 1; }
/* Textarea édition admin */
.pr-item-edit {
  flex: 1; border: 1.5px solid rgba(200,144,42,0.35);
  border-radius: 8px; padding: 6px 8px;
  font-size: 13px; font-family: inherit; line-height: 1.5;
  background: rgba(255,255,255,0.9); color: var(--navy);
  resize: vertical; min-height: 48px;
}
/* Bouton supprimer un item (admin) */
.pr-item-del {
  flex-shrink: 0; align-self: flex-start;
  background: none; border: none;
  color: #ef4444; font-size: 15px;
  cursor: pointer; padding: 4px 6px;
  border-radius: 6px; opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.pr-item-del:active { opacity: 1; background: rgba(239,68,68,0.12); }
/* Pied de page "Amen" */
.pr-amen {
  text-align: center; color: var(--navy-light, #7a8399);
  font-size: 13px; font-style: italic;
  padding: 6px 0 16px;
}
[data-theme="dark"] .pr-item           { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); }
[data-theme="dark"] .pr-item-edit      { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
[data-theme="dark"] .pr-msg-banner     { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .pr-msg-banner-title { color: #fff; }
[data-theme="dark"] .pr-msg-banner-verse { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .pr-amen            { color: rgba(255,255,255,0.55); }

/* ══════════════════════════════════════════
   ÉCRAN ADMIN — Réponses aux questions
══════════════════════════════════════════ */
.admin-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; flex-shrink: 0;
  font-size: 13px; color: var(--navy);
  background: rgba(212,160,23,0.1);
  border-bottom: 1px solid rgba(212,160,23,0.2);
}
.admin-summary i.bi-shield-lock-fill { color: #d4a017; font-size: 16px; }
.admin-summary strong {
  background: var(--navy); color: white;
  border-radius: 12px; padding: 2px 10px; font-size: 13px;
}
.admin-refresh-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--navy); font-size: 18px; padding: 4px 6px; border-radius: 8px;
}
.admin-refresh-btn:active { background: rgba(30,48,80,0.1); }
[data-theme="dark"] .admin-summary { color: #fff; background: rgba(212,160,23,0.12); }
[data-theme="dark"] .admin-summary strong { background: var(--gold-main); color: var(--navy); }
[data-theme="dark"] .admin-refresh-btn { color: rgba(255,255,255,0.8); }

.admin-q-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px; -webkit-overflow-scrolling: touch;
}
.admin-loading, .admin-empty {
  text-align: center; padding: 50px 20px;
  color: #999; font-size: 14px;
}
[data-theme="dark"] .admin-loading, [data-theme="dark"] .admin-empty { color: rgba(255,255,255,0.4); }

.admin-q-card {
  background: white; border-radius: 14px; padding: 14px;
  margin-bottom: 12px; box-shadow: 0 1px 6px rgba(30,48,80,0.08);
  border-left: 3px solid #d4a017;
}
[data-theme="dark"] .admin-q-card {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid #d4a017;
}
.admin-q-answered { border-left-color: #4caf50; opacity: 0.9; }

.admin-q-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.admin-q-from { font-size: 13px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 5px; }
.admin-q-date { font-size: 10px; color: #aaa; }
[data-theme="dark"] .admin-q-from { color: rgba(255,255,255,0.9); }

.admin-q-text {
  font-size: 14px; color: #333; line-height: 1.5;
  background: rgba(30,48,80,0.04); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
[data-theme="dark"] .admin-q-text { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }

.admin-q-reply-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid #ddd; border-radius: 10px;
  font-size: 13px; font-family: inherit; resize: none;
  outline: none; color: var(--navy); line-height: 1.5; margin-bottom: 10px;
}
.admin-q-reply-input:focus { border-color: #d4a017; }
[data-theme="dark"] .admin-q-reply-input {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff;
}
.admin-q-send-btn {
  width: 100%; padding: 10px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-main), var(--amber));
  color: var(--navy); font-size: 13px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.admin-q-send-btn:disabled { opacity: 0.6; cursor: default; }

.admin-q-reply-done {
  background: rgba(76,175,80,0.08); border-radius: 10px; padding: 10px 12px;
}
.admin-q-reply-label {
  font-size: 11px; font-weight: 700; color: #2e7d32;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
.admin-q-reply-text { font-size: 13px; color: #333; line-height: 1.5; font-style: italic; margin-bottom: 8px; }
[data-theme="dark"] .admin-q-reply-text { color: rgba(255,255,255,0.85); }
.admin-q-edit-link {
  background: none; border: none; cursor: pointer;
  color: var(--navy); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 4px; padding: 0;
}
[data-theme="dark"] .admin-q-edit-link { color: rgba(255,255,255,0.7); }

/* Spin */
.spin { animation: spinAnim 0.8s linear infinite; display: inline-block; }
@keyframes spinAnim { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   UNIFICATION DES HEADERS — style « Vidéothèque » (.dark-header)
   Tous les en-têtes « barre de titre » adoptent le même bandeau
   dégradé navy → bleu → or + fondu bas + titre doré centré,
   identique dans les deux thèmes (light comme dark).
════════════════════════════════════════════════════════════ */
.me-topbar,
.questions-hero,
.qr-hero,
.books-header,
.book-fullpage-head.center,
.pg-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #1a3a7a 55%, var(--gold-deep) 100%) !important;
  border-bottom: none !important;
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image:         linear-gradient(to bottom, black 92%, transparent 100%);
}

/* Titres : dorés + centrés (forcés même en thème clair) */
.me-topbar-title,
.questions-hero h2,
.qr-hero h2,
.books-header-title,
.books-header h2,
.pg-hero-title {
  color: var(--gold-light) !important;
  text-align: center !important;
}

/* Sous-titres : blanc translucide */
.questions-hero p,
.qr-hero p,
.books-header-sub,
.books-header p,
.pg-hero-sub {
  color: rgba(255,255,255,0.90) !important;
  text-align: center !important;
}

/* Icônes de hero (Questions / Q&R) : dorées, centrées */
.questions-hero .q-icon,
.qr-hero-icon {
  color: var(--gold-light) !important;
  text-align: center;
  width: 100%;
}

/* Bouton retour : toujours blanc sur le bandeau sombre (les 2 thèmes) */
.me-back-btn,
.books-header .back-btn,
.questions-hero .screen-close-btn,
.qr-hero .screen-close-btn,
.book-fullpage .screen-close-btn {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
/* Exception : en clair, l'en-tête du Résumé est pastel (comme la Bibliothèque)
   — le chevron blanc s'y noyait. Navy, comme les autres boutons sur pastel.
   Le lecteur PDF garde son bandeau navy, donc son chevron blanc. */
[data-theme="light"] #book-summary-page .screen-close-btn {
  background: rgba(30,48,80,0.12) !important;
  color: var(--navy) !important;
}
.me-back-btn:active { background: rgba(255,255,255,0.38) !important; }

/* Bouton « + » de l'en-tête Prières : blanc sur le bandeau */
.prieres-add-corner {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}

/* Sous-titre des en-têtes me-topbar (Mon Espace, Prières, etc.) */
.me-topbar-sub {
  color: rgba(255,255,255,0.90) !important;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

/* ════════════════════════════════════════════════════════════
   LIGHT MODE — tous les headers reprennent le pastel « Activités »
   (override le navy→gold de l'unification, qui ne reste qu'en dark)
   Spécificité [data-theme="light"] + !important > .me-topbar !important
════════════════════════════════════════════════════════════ */
[data-theme="light"] .me-topbar,
[data-theme="light"] .questions-hero,
[data-theme="light"] .qr-hero,
[data-theme="light"] .books-header,
[data-theme="light"] .book-fullpage-head.center,
[data-theme="light"] .pg-hero {
  background: linear-gradient(160deg, #C8DFFE 0%, #A8C8F0 45%, #FFD8A8 100%) !important;
}
/* Sur ce pastel, le texte blanc de l'en-tête Résumé devient illisible (1.36).
   Comme l'en-tête Bibliothèque, on passe titre et sous-titre en navy. */
[data-theme="light"] .book-fullpage-head.center .book-fullpage-title { color: var(--navy); }
[data-theme="light"] .book-fullpage-head.center .book-fullpage-sub   { color: #1e3050; }
/* Titres en navy foncé */
[data-theme="light"] .me-topbar-title,
[data-theme="light"] .questions-hero h2,
[data-theme="light"] .qr-hero h2,
[data-theme="light"] .books-header-title,
[data-theme="light"] .books-header h2,
[data-theme="light"] .pg-hero-title {
  color: var(--navy) !important;
}
/* Sous-titres lisibles sur pastel */
[data-theme="light"] .me-topbar-sub,
[data-theme="light"] .questions-hero p,
[data-theme="light"] .qr-hero p,
[data-theme="light"] .books-header-sub,
[data-theme="light"] .books-header p,
[data-theme="light"] .pg-hero-sub {
  color: #1e3050 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
/* Icônes de hero en doré (contraste sur pastel) */
[data-theme="light"] .questions-hero .q-icon,
[data-theme="light"] .qr-hero-icon {
  color: var(--gold-main) !important;
}
/* Bouton retour / + : foncé translucide sur fond clair (au lieu de blanc) */
[data-theme="light"] .me-back-btn,
[data-theme="light"] .books-header .back-btn,
[data-theme="light"] .questions-hero .screen-close-btn,
[data-theme="light"] .qr-hero .screen-close-btn,
[data-theme="light"] .prieres-add-corner {
  background: rgba(30,48,80,0.12) !important;
  color: var(--navy) !important;
}
[data-theme="light"] .me-back-btn:active,
[data-theme="light"] .prieres-add-corner:active {
  background: rgba(30,48,80,0.22) !important;
}

/* Indication « Premiers pas » sur l'écran de démarrage (Commencer) */
.splash-guide-hint {
  margin-top: 16px;
  max-width: 280px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--navy-light, #5a6b85);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(245,192,96,0.55);
  background: rgba(245,192,96,0.08);
  transition: background 0.15s;
}
.splash-guide-hint:active { background: rgba(245,192,96,0.18); }

/* Champ prénom verrouillé (Questions) — rempli depuis le compte */
.q-input-locked {
  opacity: 0.75;
  cursor: not-allowed;
}

/* Sélecteurs Bible : pas de fond blanc, on garde le fond de la page */
.bible-selectors {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(128,128,128,0.18) !important;
}
#screen-bible.night-bible .bible-selectors {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}

/* Fond unifié de toutes les sous-pages, identique au Profil (var(--cream)) */
#screen-activites,
#screen-evenements,
#screen-mon-espace,
#screen-prieres,
#screen-guide,
#screen-about,
#screen-about-detail,
#screen-notif-settings,
#screen-admin-q,
#screen-auth {
  background: var(--cream) !important;
}
#screen-activites .screen-body,
#activites-list,
#screen-evenements .me-body,
#screen-mon-espace .me-body,
#screen-guide .about-body,
#screen-about .about-body,
#screen-about-detail .detail-body,
#screen-notif-settings .notif-settings-body,
#screen-auth .me-body {
  background: transparent !important;
}

/* Sous-titre du header Témoignages */
.temo-sub {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin: 1px 0 8px;
  letter-spacing: 0.3px;
}
/* Light : sous-titre navy foncé (comme le sous-titre de Questions/Domande) */
[data-theme="light"] .temo-sub {
  color: #1e3050 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Bannière « Voir le guide » (après le choix de langue au 1er lancement) */
.guide-hint-banner {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 600;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--navy), #1a3a7a);
  color: #fff;
  padding: 11px 12px;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  border: 1px solid rgba(245,192,96,0.45);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.guide-hint-banner.show { opacity: 1; transform: translateY(0); }
.guide-hint-icon { color: var(--gold-main); font-size: 22px; flex-shrink: 0; }
.guide-hint-text { flex: 1; font-size: 12px; line-height: 1.35; }
.guide-hint-btn {
  background: var(--gold-main); color: var(--navy);
  border: none; border-radius: 16px; padding: 6px 12px;
  font-size: 11px; font-weight: 800; cursor: pointer; flex-shrink: 0;
  white-space: nowrap;
}
.guide-hint-btn:active { opacity: 0.85; }
.guide-hint-close {
  background: none; border: none; color: rgba(255,255,255,0.55);
  font-size: 13px; cursor: pointer; flex-shrink: 0; padding: 2px 4px;
}

/* build marker 1780360240 */

/* ══════════════════════════════════════════
   SÉLECTEUR DE PARTAGE (Image / Texte / Les deux)
══════════════════════════════════════════ */
.share-choice-ov {
  position: absolute; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px 10px;
  animation: shareOvIn 0.18s ease;
}
@keyframes shareOvIn { from { opacity: 0; } to { opacity: 1; } }
.share-choice-sheet {
  width: 100%; max-width: 520px;
  max-height: 80%;
  overflow-y: auto;
  background: var(--cream, #fff);
  border-radius: 20px;
  padding: 18px 16px 18px;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
  animation: shareSheetIn 0.22s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes shareSheetIn { from { transform: translateY(calc(100% + 10px)); } to { transform: translateY(0); } }
[data-theme="dark"] .share-choice-sheet { background: #1a2744; }
.share-choice-title {
  text-align: center; font-size: 14px; font-weight: 800;
  color: var(--navy); margin-bottom: 14px;
}
[data-theme="dark"] .share-choice-title { color: var(--gold-light); }
.share-choice-btn {
  width: 100%; padding: 13px 16px; margin-bottom: 9px;
  border: 1.5px solid rgba(240,160,64,0.30); border-radius: 14px;
  background: #fff; color: var(--navy);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px; justify-content: center;
  transition: background 0.15s;
}
.share-choice-btn i { font-size: 17px; color: var(--gold-deep); }
.share-choice-btn:active { background: rgba(240,160,64,0.10); }
[data-theme="dark"] .share-choice-btn { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .share-choice-btn i { color: var(--gold-light); }
.share-choice-cancel {
  width: 100%; padding: 12px; margin-top: 4px;
  border: none; border-radius: 14px;
  background: transparent; color: var(--navy-light, #8893a5);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
[data-theme="dark"] .share-choice-cancel { color: rgba(255,255,255,0.5); }

/* ══ Engagement : likes / commentaires / partages ══════════════ */
.engage-row {
  display: flex; gap: 8px; margin-top: 14px;
}
.engage-btn {
  flex: 1; min-height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--cream-dark); border-radius: 12px;
  background: #fff; color: var(--navy);
  font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer;
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.engage-btn i { font-size: 16px; color: var(--gold-main); transition: color 0.15s, transform 0.15s; }
.engage-btn:active { transform: scale(0.95); border-color: var(--gold-main); }
.engage-btn .engage-count { font-size: 12.5px; font-weight: 800; min-width: 6px; color: var(--navy-light); }
.engage-btn.engaged { border-color: #e0556b; }
.engage-btn.engaged i { color: #e0556b; animation: likePop 0.3s ease; }
@keyframes likePop { 0%{transform:scale(1);} 45%{transform:scale(1.35);} 100%{transform:scale(1);} }
[data-theme="dark"] .engage-btn { background: #1C2537; color: #fff; border-color: rgba(255,255,255,0.07); box-shadow: none; }
[data-theme="dark"] .engage-btn i { color: var(--gold-light); }
[data-theme="dark"] .engage-btn .engage-count { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .engage-btn.engaged i { color: #ff6b81; }

/* ══ Feuille des commentaires ══════════════════════════════════ */
.comments-ov {
  position: absolute; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px 10px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  box-sizing: border-box; overflow: hidden;
}
.comments-ov *, .comments-ov *::before, .comments-ov *::after { box-sizing: border-box; }
.comments-ov.open { opacity: 1; pointer-events: auto; }
.comments-sheet {
  width: 100%; max-width: 100%; height: 68%; max-height: 68%;
  background: var(--cream, #fff);
  border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(calc(100% + 10px)); transition: transform 0.26s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
}
.comments-ov.open .comments-sheet { transform: translateY(0); }
[data-theme="dark"] .comments-sheet { background: #16213d; }
.comments-head {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 16px 18px 10px;
  position: relative;
}
.comments-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 16px; font-weight: 800; color: var(--navy);
  white-space: nowrap; pointer-events: none;
}
.comments-title i { color: var(--gold-deep); margin-right: 4px; }
[data-theme="dark"] .comments-title { color: #fff; }
.comments-close {
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.06); color: var(--navy); cursor: pointer; font-size: 15px;
}
[data-theme="dark"] .comments-close { background: rgba(255,255,255,0.1); color: #fff; }
.comments-note {
  margin: 0 18px 8px; padding: 7px 11px; border-radius: 10px;
  background: rgba(240,160,64,0.12); color: var(--gold-deep);
  font-size: 11.5px; font-weight: 700;
}
.comments-note i { margin-right: 4px; }
.comments-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 16px 12px; }
.comments-empty { text-align: center; padding: 40px 16px; color: var(--navy-light, #8893a5); font-size: 13.5px; }
.comment-card { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
[data-theme="dark"] .comment-card { border-bottom-color: rgba(255,255,255,0.08); }
.comment-avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy, #1e3050), var(--gold-deep, #c8902a));
  color: #fff; font-weight: 800; font-size: 15px;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta { font-size: 12px; margin-bottom: 2px; }
.comment-name-tag { font-weight: 800; color: var(--navy); }
[data-theme="dark"] .comment-name-tag { color: var(--gold-light); }
.comment-when { color: var(--navy-light, #99a); margin-left: 6px; font-size: 11px; }
.comment-msg { font-size: 13.5px; line-height: 1.45; color: var(--navy, #243); word-wrap: break-word; }
[data-theme="dark"] .comment-msg { color: rgba(255,255,255,0.88); }
.comments-form {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--cream, #fff);
}
[data-theme="dark"] .comments-form { background: #16213d; border-top-color: rgba(255,255,255,0.1); }
.comment-name {
  width: 100%; padding: 9px 12px; margin-bottom: 7px;
  border: 1.5px solid rgba(240,160,64,0.28); border-radius: 11px;
  font-size: 13px; font-family: inherit; background: #fff; color: var(--navy);
}
.comment-input-row { display: flex; gap: 8px; align-items: flex-end; }
.comment-text {
  flex: 1; padding: 10px 12px; resize: none; line-height: 1.4;
  border: 1.5px solid rgba(240,160,64,0.28); border-radius: 14px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--navy);
  max-height: 120px;
}
[data-theme="dark"] .comment-name,
[data-theme="dark"] .comment-text { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.15); }
.comment-send {
  flex: 0 0 44px; width: 44px; height: 44px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-deep, #c8902a), #e0a93f);
  color: #fff; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.comment-send:disabled { opacity: 0.6; cursor: default; }

/* ── Actions commentaire (like / répondre) ── */
.comment-actions { display: flex; gap: 14px; margin-top: 6px; }
.comment-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--navy-light, #8893a5);
  padding: 3px 0; transition: color 0.18s;
}
.comment-action-btn:hover { color: var(--navy, #0f2547); }
.comment-action-btn.liked,
.comment-action-btn.liked i { color: #e74c3c; }
.comment-action-btn span { font-size: 11px; }
[data-theme="dark"] .comment-action-btn { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .comment-action-btn:hover { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .comment-action-btn.liked,
[data-theme="dark"] .comment-action-btn.liked i { color: #e74c3c; }

/* ── Bouton collapse/expand des réponses ── */
.comment-toggle-replies {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font-size: 12px; font-weight: 600; color: var(--gold-deep, #b8730a);
  transition: color 0.15s;
}
.comment-toggle-replies:active { opacity: 0.7; }
.comment-toggle-replies i { font-size: 11px; transition: transform 0.2s; }
[data-theme="dark"] .comment-toggle-replies { color: var(--gold-light); }

/* ── Threads imbriqués ── */
.comment-thread { margin-top: 4px; }
.comment-thread .comment-card {
  border-bottom: none;
  border-left: 2px solid rgba(0,0,0,0.08);
  padding-left: 10px; padding-top: 8px; padding-bottom: 4px;
}
[data-theme="dark"] .comment-thread .comment-card { border-left-color: rgba(255,255,255,0.1); }

/* ── Indicateur "Réponse à …" ── */
.comment-reply-indicator {
  display: flex; align-items: center; gap: 6px;
  background: rgba(184,146,42,0.1);
  border-left: 3px solid var(--gold, #b8922a);
  border-radius: 0 4px 4px 0; padding: 6px 10px; margin-bottom: 8px;
  font-size: 12px; color: var(--gold, #b8922a);
}
.comment-reply-indicator span { flex: 1; }
.comment-reply-cancel {
  background: none; border: none; cursor: pointer;
  color: var(--gold, #b8922a); padding: 0 2px; font-size: 16px; line-height: 1;
}

/* ── Commentaire admin ── */
.comment-avatar-admin {
  background: linear-gradient(135deg, #b8922a, #e8c96a);
  color: #1a1a2e; font-size: 13px; font-weight: 800;
  overflow: hidden; padding: 0;
}
.comment-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.comment-name-admin { color: var(--gold, #b8922a) !important; }
.comment-admin-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  background: var(--gold, #b8922a); color: #fff; border-radius: 3px;
  padding: 1px 4px; margin-left: 4px; vertical-align: middle; text-transform: uppercase;
}
.comment-admin .comment-msg { font-weight: 500; }
[data-theme="dark"] .comment-admin-badge { background: #b8922a; }

/* ══ Modération admin — actions commentaires ═══════════════════ */
.admin-c-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.admin-c-btn {
  border: none; border-radius: 10px; padding: 8px 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.admin-c-approve { background: #1f9d57; color: #fff; }
.admin-c-hide    { background: rgba(0,0,0,0.08); color: var(--navy); }
.admin-c-del     { background: #e0556b; color: #fff; }
.admin-c-save    { background: var(--gold-main); color: var(--navy); }
.admin-c-ok { font-size: 12.5px; font-weight: 700; color: #1f9d57; display: inline-flex; align-items: center; gap: 5px; }
[data-theme="dark"] .admin-c-hide { background: rgba(255,255,255,0.12); color: #fff; }

/* ══ PWA standalone : cache la fausse status-bar (9:41) ══
   En mode installed app, iOS/Android fournit sa propre status-bar native.
   La barre simulée doit disparaître pour ne pas doubler l'affichage.
   Guideline Apple HIG + App Store Review 4.0 ═══════════════════════ */
@media (display-mode: standalone) {
  .status-bar { display: none !important; }
}

/* ══ Bouton suppression de compte (App Store 5.1.1) ══════════ */
.auth-delete-account-btn {
  margin-top: 20px; width: 100%;
  padding: 12px 16px; border-radius: 12px; border: 1.5px solid rgba(224,85,107,0.4);
  background: rgba(224,85,107,0.07); color: #c0354f;
  font-size: 14px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: background 0.15s;
}
.auth-delete-account-btn:hover { background: rgba(224,85,107,0.14); }

/* ══ Modal confirmation suppression ═════════════════════════ */
.delete-account-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}
.delete-account-sheet {
  width: 100%; max-width: 440px;
  background: var(--cream, #fdf5ec); border-radius: 24px 24px 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.del-acc-icon { font-size: 40px; color: #e0556b; margin-bottom: 12px; }
.del-acc-title { font-size: 18px; font-weight: 800; color: var(--navy,#22304a); margin: 0 0 8px; }
.del-acc-msg { font-size: 13.5px; color: var(--navy-light,#4a5f7a); margin: 0 0 18px; line-height: 1.5; }
.del-acc-pwd {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.15);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--navy,#22304a);
  box-sizing: border-box; margin-bottom: 8px;
}
.del-acc-error { font-size: 12.5px; color: #c0354f; margin-bottom: 10px; }
.del-acc-actions { display: flex; gap: 10px; margin-top: 12px; }
.del-acc-cancel {
  flex: 1; padding: 13px; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.05); color: var(--navy,#22304a);
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.del-acc-confirm {
  flex: 1; padding: 13px; border-radius: 12px; border: none;
  background: #e0556b; color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.del-acc-confirm:disabled { opacity: 0.6; cursor: default; }

/* ══ Safe area — Home Indicator iOS (barre du bas) ══════════
   En mode standalone, la bottom-nav doit laisser de la place
   sous le Home Indicator (env(safe-area-inset-bottom) ≈ 34px) */
@media (display-mode: standalone) {
  .bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }
}

/* ══ ADMIN CHAIN PAGE ════════════════════════════════════════ */

.admin-chain-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-chain-card {
  background: rgba(212, 160, 23, 0.09);
  border: 2px solid rgba(212, 160, 23, 0.38);
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow: 0 2px 14px rgba(212, 160, 23, 0.10);
}
[data-theme="dark"] .admin-chain-card {
  background: rgba(212, 160, 23, 0.10);
  border-color: rgba(212, 160, 23, 0.30);
}
/* Champs de saisie à l'intérieur de la carte dorée */
.admin-chain-card .pc-admin-input,
.admin-chain-card .pc-admin-textarea {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(212, 160, 23, 0.28);
}
[data-theme="dark"] .admin-chain-card .pc-admin-input,
[data-theme="dark"] .admin-chain-card .pc-admin-textarea {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(212, 160, 23, 0.25);
}

/* ── Historique des chaînes ── */
.admin-chain-history-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--navy-light, #4a6080);
  margin-bottom: 8px;
}
[data-theme="dark"] .admin-chain-history-title { color: rgba(255,255,255,0.45); }

.chain-hist-item {
  background: var(--cream);
  border: 1px solid var(--cream-dark, #e8e4dc);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
[data-theme="dark"] .chain-hist-item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.chain-hist-pct {
  font-size: 18px;
  font-weight: 900;
  color: var(--gold-main);
  white-space: nowrap;
  line-height: 1.2;
  min-width: 40px;
}
.chain-hist-info { flex: 1; min-width: 0; }
.chain-hist-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .chain-hist-titre { color: #fff; }
.chain-hist-meta {
  font-size: 11px;
  color: var(--navy-light, #4a6080);
}
[data-theme="dark"] .chain-hist-meta { color: rgba(255,255,255,0.45); }
.chain-hist-votes {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
[data-theme="dark"] .chain-hist-votes { color: rgba(255,255,255,0.7); }

/* ══ ADMIN HUB ═══════════════════════════════════════════════ */

.admin-hub-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

.admin-hub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: var(--cream);
  border: 1.5px solid var(--cream-dark, #e8e0d4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s;
}
.admin-hub-card:active { transform: scale(0.985); box-shadow: none; }
[data-theme="dark"] .admin-hub-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.admin-hub-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.admin-hub-icon-blue   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.admin-hub-icon-purple { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.admin-hub-icon-gold   { background: rgba(var(--gold-rgb,200,160,60),0.15); color: var(--gold); }
[data-theme="dark"] .admin-hub-icon-gold { color: var(--gold-light, #e8c96a); }

.admin-hub-card-info { flex: 1; min-width: 0; }
.admin-hub-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3px;
}
[data-theme="dark"] .admin-hub-card-title { color: #fff; }
.admin-hub-card-sub {
  font-size: 12px;
  color: var(--navy-light, #5a6a80);
}
[data-theme="dark"] .admin-hub-card-sub { color: rgba(255,255,255,0.5); }

.admin-hub-chevron {
  font-size: 16px;
  color: var(--navy-light, #5a6a80);
  flex-shrink: 0;
}
[data-theme="dark"] .admin-hub-chevron { color: rgba(255,255,255,0.35); }

/* ══ CHAÎNE DE PRIÈRE ════════════════════════════════════════ */

/* -- Bannière accueil (chaîne de prière) -- */
#pc-home-banner {
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin: 0 0 12px;
  background: #fff;
  border: 1.5px solid rgba(240, 160, 64, 0.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
[data-theme="dark"] #pc-home-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-color: rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
}
/* Shimmer doré identique à msg-card-big::after */
[data-theme="dark"] #pc-home-banner::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(245,192,96,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Label "Chaîne de Prière" → identique à "Message du jour" ── */
.pc-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  position: relative; z-index: 1;
}
.pc-icon { font-size: 14px; color: var(--gold-light); }
.pc-label {
  font-size: 12px; font-weight: 800;
  color: var(--gold-light); text-transform: none; letter-spacing: 0;
}
[data-theme="light"] .pc-icon  { color: var(--gold-main); }
[data-theme="light"] .pc-label { color: #0F2547; }

/* ── Titre → identique à "DÉLIVRANCE & VICTOIRE" (msg-tag) ── */
.pc-titre {
  font-size: 9px; font-weight: 700;
  color: var(--gold-light); letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 10px;
  position: relative; z-index: 1;
}
[data-theme="light"] .pc-titre { color: var(--gold-deep); font-weight: 800; }

.pc-corps {
  font-size: 13px;
  color: var(--navy-light, #5a6a80);
  margin-bottom: 10px;
  line-height: 1.5;
  position: relative; z-index: 1;
}
[data-theme="dark"] .pc-corps { color: rgba(255,255,255,0.65); }

/* -- Barre de progression -- */
.pc-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.pc-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--cream-dark, #e8e0d4);
  overflow: hidden;
}
[data-theme="dark"] .pc-progress-track { background: rgba(255,255,255,0.14); }
.pc-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gold-main);
  transition: width 0.5s ease;
}
.pc-progress-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy-light, #5a6a80);
  white-space: nowrap;
}
[data-theme="dark"] .pc-progress-count { color: rgba(255,255,255,0.55); }

/* -- Bouton J'ai prié (fond cream, icône dorée) -- */
.pc-pray-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 16px; border-radius: 12px;
  position: relative; z-index: 1;
  border: 1.5px solid rgba(240,160,64,0.45);
  background: var(--cream, #FDFBF7);
  color: var(--navy);
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background 0.15s, transform 0.12s, border-color 0.15s;
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
}
.pc-pray-btn i { color: var(--gold-main, #f0a040); transition: color 0.15s; }
.pc-pray-btn:active { transform: scale(0.97); border-color: var(--gold-main); }
[data-theme="dark"] .pc-pray-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(240,160,64,0.30);
  color: #fff;
}
[data-theme="dark"] .pc-pray-btn i { color: var(--gold-light, #f5c060); }
.pc-pray-btn.pc-pray-voted {
  border-color: rgba(240,160,64,0.20);
  color: var(--navy-light, #5a6a80);
  cursor: default;
}
.pc-pray-btn.pc-pray-voted i { color: var(--gold-main, #f0a040); }
[data-theme="dark"] .pc-pray-btn.pc-pray-voted {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
}
.pc-pray-btn:disabled { opacity: 0.8; }

/* -- Ligne copier / commenter / partager -- */
.pc-action-row { display: flex; gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
/* Compteurs sur les boutons de la chaîne (identiques à engage-count) */
.pc-action-row .engage-btn { position: relative; }
.pc-btn-count {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.70);
  margin-left: 3px;
}
[data-theme="light"] .pc-btn-count { color: var(--navy-mid, #1e3050); }


/* -- Section profil -- */
#pc-profile-section {
  margin: 0 0 14px;
  border-radius: 14px;
  background: var(--cream);
  border: 1.5px solid rgba(var(--gold-rgb, 200,160,60), 0.30);
  padding: 14px 16px;
}
[data-theme="dark"] #pc-profile-section {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.pc-profile-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pc-profile-icon {
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
}
[data-theme="dark"] .pc-profile-icon { color: var(--gold-light, #e8c96a); }
.pc-profile-text { flex: 1; }
.pc-profile-section-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
[data-theme="dark"] .pc-profile-section-lbl { color: var(--gold-light, #e8c96a); }
.pc-profile-count-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-profile-count {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}
[data-theme="dark"] .pc-profile-count { color: #fff; }
.pc-profile-part-lbl {
  font-size: 12px;
  color: var(--navy-light, #5a6a80);
}
[data-theme="dark"] .pc-profile-part-lbl { color: rgba(255,255,255,0.55); }
.pc-badge {
  font-size: 20px;
  line-height: 1;
}

/* -- Admin -- */
.pc-admin-section {
  margin-top: 22px;
  border-top: 1.5px solid var(--cream-dark, #e8e0d4);
  padding-top: 16px;
}
[data-theme="dark"] .pc-admin-section { border-color: rgba(255,255,255,0.12); }
.pc-admin-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--navy);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
[data-theme="dark"] .pc-admin-heading { color: #fff; }
.pc-admin-hint {
  font-size: 11px; color: var(--navy-light, #5a6a80);
  margin-bottom: 10px; display: flex; align-items: center; gap: 5px;
}
.pc-admin-hint i { color: var(--gold-main); font-size: 13px; }
[data-theme="dark"] .pc-admin-hint { color: rgba(255,255,255,0.45); }
.pc-admin-field { margin-bottom: 10px; }
.pc-admin-input,
.pc-admin-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--cream-dark, #e8e0d4);
  background: #fff;
  color: var(--navy);
  font-size: 16px; /* ≥16px : évite le zoom auto iOS au focus */
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s;
}
[data-theme="dark"] .pc-admin-input,
[data-theme="dark"] .pc-admin-textarea {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.pc-admin-input:focus,
.pc-admin-textarea:focus { border-color: var(--navy); }
.pc-admin-textarea { resize: vertical; min-height: 72px; }

/* ── iOS : empêche le zoom automatique au focus d'un champ ──────────
   Safari mobile zoome dès qu'un champ texte a une police < 16px.
   Filet de sécurité global : tous les champs de saisie de l'app sont
   forcés à ≥16px, pour ne plus jamais avoir ce zoom intempestif. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
textarea,
select {
  font-size: 16px !important; /* !important : gagne sur les classes (.q-input, .auth-input… toutes à 13-14px) */
}

/* ── Écran admin « Message du jour » : lisibilité en thème sombre ── */
/* Règle de fond : tout texte simple de l'écran devient clair en dark,
   pour que chaque libellé/case à cocher reste lisible sans style dédié. */
[data-theme="dark"] #screen-admin-message { color: rgba(255,255,255,0.88); }
.am-label { font-size: 12px; color: var(--navy-light, #555); display: block; margin-bottom: 4px; }
[data-theme="dark"] .am-label { color: rgba(255,255,255,0.65); }
.am-help { font-size: 11px; color: #777; margin: -4px 4px 10px; }
[data-theme="dark"] .am-help { color: rgba(255,255,255,0.55); }
.am-num-field { background: #f0f0f0 !important; color: #1a1a1a !important; }
[data-theme="dark"] .am-num-field { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
#am-bulk-preview { color: var(--navy); }
[data-theme="dark"] #am-bulk-preview { color: rgba(255,255,255,0.85); }

.pc-admin-publish-btn {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 1.5px solid rgba(240,160,64,0.45);
  background: var(--cream, #FDFBF7);
  color: var(--navy);
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 4px;
  box-shadow: 0 2px 10px rgba(30,48,80,0.06);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.pc-admin-publish-btn i { color: var(--gold-main, #f0a040); }
.pc-admin-publish-btn:active { transform: scale(0.97); border-color: var(--gold-main); }
[data-theme="dark"] .pc-admin-publish-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(240,160,64,0.30);
  color: #fff;
}
[data-theme="dark"] .pc-admin-publish-btn i { color: var(--gold-light, #f5c060); }
.pc-admin-publish-btn:disabled { opacity: 0.6; cursor: default; }
.pc-admin-msg {
  margin-top: 8px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: none;
}
.pc-admin-msg-ok  { background: rgba(80,184,150,0.15); color: #2a7a5e; }
.pc-admin-msg-err { background: rgba(224,85,107,0.12); color: #c0304a; }
[data-theme="dark"] .pc-admin-msg-ok  { color: #6de3b8; background: rgba(80,184,150,0.2); }
[data-theme="dark"] .pc-admin-msg-err { color: #f07a8a; background: rgba(224,85,107,0.18); }

/* Statut chaîne active en admin */
.pc-admin-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pc-admin-active-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #50b896;
  flex-shrink: 0;
}
.pc-admin-active-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #2a7a5e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
[data-theme="dark"] .pc-admin-active-lbl { color: #6de3b8; }
.pc-admin-active-votes {
  font-size: 12px;
  color: var(--navy-light, #5a6a80);
  margin-left: auto;
}
[data-theme="dark"] .pc-admin-active-votes { color: rgba(255,255,255,0.5); }
.pc-admin-active-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
[data-theme="dark"] .pc-admin-active-titre { color: #fff; }
.pc-admin-close-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1.5px solid rgba(224,85,107,0.4);
  background: transparent;
  color: #c0304a;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
[data-theme="dark"] .pc-admin-close-btn { color: #f07a8a; border-color: rgba(240,122,138,0.35); }
.pc-admin-inactive {
  font-size: 13px;
  color: var(--navy-light, #5a6a80);
  font-style: italic;
}
[data-theme="dark"] .pc-admin-inactive { color: rgba(255,255,255,0.45); }

/* ══════════════════════════════════════════
   ZOOM DU NAVIGATEUR — rendre la main au doigt
   Le squelette d'application verrouille la page : html/body en
   overflow:hidden + overscroll-behavior:none, et le seul élément défilant
   (.screen-body) ne défile qu'en vertical. Tant que l'échelle vaut 1 c'est
   ce qu'on veut. Dès que l'utilisateur zoome, ce verrou devient un piège :
   la vue agrandie dépasse l'écran, et overscroll-behavior:none coupe le
   chaînage qui permettrait au doigt de la déplacer — sur Android le contenu
   sorti du cadre n'est plus atteignable (iOS déplace la vue visuelle sans
   passer par ce chaînage, d'où un symptôme propre à Android).
   La classe est posée par js/zoom-pan.js d'après visualViewport.scale.
══════════════════════════════════════════ */
html.is-zoomed,
html.is-zoomed body {
  overflow: auto;
  overscroll-behavior: auto;
}
html.is-zoomed .screen-body,
html.is-zoomed .onboarding-overlay {
  overscroll-behavior: auto;
}