/* =========================================================================
   theme-v2.css — « Byzance lumineuse » (juillet 2026)
   -------------------------------------------------------------------------
   Calque de refonte chargé APRÈS styles.css sur toutes les pages (inject_all).
   Il ne remplace pas la feuille principale : il la transfigure.
   Idées directrices :
     · le hero devient une « abside » — bloc nocturne éclairé à l'or, stable
       dans les deux thèmes (comme .pointer / .site-footer) ;
     · navigation de page en fondu (View Transitions API — MPA fluide) ;
     · lettrines enluminées sur les articles ;
     · cartes qui répondent à la main (élévation + filet d'or) ;
     · le cierge virtuel (bouton flottant + flamme en CSS pur) — voir candle.js.
   Tout est piloté par les jetons de styles.css ; le mode sombre reste intact.
   ========================================================================= */

/* ---- 0. Transitions de page (MPA → sensation d'application) ------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: tv2-leave .18s ease both;
}
::view-transition-new(root) {
  animation: tv2-enter .30s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes tv2-leave { to { opacity: 0; } }
@keyframes tv2-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* L'en-tête reste en place pendant la traversée (il ne « saute » pas). */
.site-header { view-transition-name: tv2-header; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- 1. Jetons affinés --------------------------------------------------- */
:root {
  --radius: 16px;
  --shadow-lg: 0 12px 28px -10px rgba(20, 18, 16, .14),
               0 32px 64px -18px rgba(20, 18, 16, .22);
  /* Nuit byzantine : fond des surfaces « abside » (hero, cierge) */
  --night:      #14161d;
  --night-2:    #1b1e28;
  --night-ink:  #f2edE1;
  --flame:      #ffb347;
}

/* ---- 2. En-tête : verre plus net + filet d'or vivant --------------------- */
.site-header {
  position: sticky;
  transition: box-shadow .3s ease, min-height .3s ease;
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--gold) 55%, transparent) 50%,
    transparent 100%);
  pointer-events: none;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 30px -12px rgba(20, 18, 16, .18);
}
[data-theme="dark"] .site-header.is-scrolled {
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .55);
}

/* ---- 3. Hero « abside » : nuit + or, stable dans les deux thèmes --------- */
.hero {
  /* Jetons locaux : tous les enfants (boutons, accès rapide, eyebrow)
     basculent d'eux-mêmes sur la gamme nocturne. */
  --paper:    var(--night);
  --surface:  rgba(246, 239, 224, .055);
  --band:     var(--night-2);
  --ink:      var(--night-ink);
  --ink-soft: #cfc5ae;
  --muted:    #a89d85;
  --line:     rgba(242, 237, 225, .16);
  --card-border: rgba(242, 237, 225, .12);

  color: var(--night-ink);
  background-color: var(--night);
  background-image:
    /* halo d'or : la lumière vient d'en haut, comme d'une coupole */
    radial-gradient(1100px 520px at 78% -10%,
      rgba(198, 154, 69, .28), rgba(198, 154, 69, .07) 45%, transparent 70%),
    radial-gradient(700px 420px at 12% 112%,
      rgba(136, 53, 53, .16), transparent 65%),
    /* croix gravée, or discret, à droite */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='392' viewBox='0 0 24 32' fill='none' stroke='%23c69a45' stroke-opacity='0.14' stroke-width='0.9' stroke-linecap='round'%3E%3Cline x1='12' y1='3' x2='12' y2='29'/%3E%3Cline x1='8.5' y1='7.5' x2='15.5' y2='7.5'/%3E%3Cline x1='5' y1='12.5' x2='19' y2='12.5'/%3E%3Cline x1='8' y1='24' x2='16' y2='19.5'/%3E%3C/svg%3E"),
    linear-gradient(165deg, #1a1d28 0%, var(--night) 55%, #16130f 100%);
  background-repeat: no-repeat;
  background-position: center top, left bottom, right clamp(-70px, -2vw, -24px) center, center;
  border-bottom: 1px solid rgba(198, 154, 69, .22);
}
/* Respiration lumineuse très lente (éteinte si mouvement réduit) */
.hero::before {
  content: "";
  position: absolute; inset: -20%;
  background: radial-gradient(620px 380px at 62% 8%,
    rgba(230, 195, 120, .13), transparent 70%);
  animation: tv2-breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tv2-breathe {
  from { opacity: .45; transform: translateX(-2%); }
  to   { opacity: 1;   transform: translateX(2%); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

.hero .wrap { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 4.6rem);
  background: linear-gradient(112deg,
    #f7f1e2 0%, #eddfb4 38%, #cfa452 68%, #f1e5c5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .eyebrow { color: #dcb763; }
.hero .eyebrow::after { background: linear-gradient(90deg, #dcb763, transparent); }
.hero__lead { color: #cfc5ae; }

/* Boutons du hero : l'or devient tangible */
.hero .btn--primary {
  background: linear-gradient(120deg, #e3bd68 0%, #c69a45 55%, #a87f2c 100%);
  color: #1c1508;
  box-shadow: 0 6px 22px -6px rgba(198, 154, 69, .55);
}
.hero .btn--primary:hover {
  background: linear-gradient(120deg, #efcb79 0%, #d3a751 55%, #b78c34 100%);
  box-shadow: 0 10px 30px -8px rgba(198, 154, 69, .7);
}
.hero .btn--ghost {
  background: transparent;
  border-color: rgba(220, 183, 99, .45);
  color: var(--night-ink);
}
.hero .btn--ghost:hover {
  border-color: #dcb763; color: #efd9a4;
  background: rgba(220, 183, 99, .08);
}
.hero__quick a:hover {
  color: var(--night-ink);
  background: rgba(220, 183, 99, .12);
  border-color: #dcb763;
}
.hero__quick svg { color: #dcb763; }

/* ---- 4. Cartes : réponse à la main + filet d'or -------------------------- */
.card, .path-card, .tile, .signpost {
  transition: transform .35s cubic-bezier(.2, .8, .25, 1),
              box-shadow .35s cubic-bezier(.2, .8, .25, 1);
}
.card:hover, .tile:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 3px 0 -1px var(--gold-soft), var(--shadow-lg);
}
.signpost:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---- 5. Articles : lettrine enluminée + liens de prose ------------------- */
.article .prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.3em;
  line-height: .82;
  float: left;
  padding: .08em .14em 0 0;
  color: var(--gold);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--gold-soft) 45%, transparent);
}
.prose a:not(.btn):not(.map-ref) {
  text-decoration-color: var(--gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.prose a:not(.btn):not(.map-ref):hover {
  color: var(--burgundy);
  text-decoration-color: var(--burgundy);
}

/* Citation d'ouverture (answer-lead) : plus solennelle */
.answer-lead {
  border-left: none;
  padding-left: 1.5rem;
  position: relative;
}
.answer-lead::before {
  content: "";
  position: absolute; left: 0; top: .15rem; bottom: .15rem; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold), var(--burgundy));
}

/* ---- 6. Pied de page : hairline d'or + fondu ------------------------------ */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--night-2), var(--night) 40%);
}
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--gold-soft) 60%, transparent) 50%, transparent);
}

/* ---- 7. Le cierge (candle.js) -------------------------------------------- */
.candle-fab {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem .55rem .7rem;
  border-radius: 999px;
  background: var(--night);
  color: var(--night-ink);
  border: 1px solid rgba(220, 183, 99, .4);
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, .45);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s, border-color .25s;
}
.candle-fab:hover {
  transform: translateY(-2px);
  border-color: #dcb763;
  box-shadow: 0 12px 32px -10px rgba(198, 154, 69, .5);
}
.candle-fab__flame { width: 14px; height: 20px; position: relative; flex: none; }
/* petite flamme du bouton : éteinte = point ; allumée = flamme qui danse */
.candle-fab__flame::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: #6f6a5c;
  transform: translateX(-50%);
  transition: background .3s;
}
.candle-fab.is-lit .candle-fab__flame::after {
  width: 10px; height: 16px;
  border-radius: 50% 50% 42% 58% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 78%, #fff3c4 0%, var(--flame) 45%, #e2601c 85%);
  box-shadow: 0 0 10px 2px rgba(255, 179, 71, .55);
  animation: tv2-flicker 1.1s ease-in-out infinite alternate;
}

/* Panneau du cierge */
.candle-pop {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.4rem);
  z-index: 61;
  /* position:fixed → 100 % = viewport, sans risque de débordement scrollbar */
  width: min(21rem, calc(100% - 2rem));
  border-radius: var(--radius);
  background:
    radial-gradient(320px 200px at 50% 0%, rgba(198, 154, 69, .16), transparent 70%),
    linear-gradient(180deg, var(--night-2), var(--night));
  color: var(--night-ink);
  border: 1px solid rgba(220, 183, 99, .3);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
  padding: 1.3rem 1.25rem 1.15rem;
  text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s .28s;
}
.candle-pop.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.candle-pop__close {
  position: absolute; top: .45rem; right: .55rem;
  color: #a89d85; font-size: 1.15rem; line-height: 1; padding: .3rem;
}
.candle-pop__close:hover { color: var(--night-ink); }

/* Le cierge dessiné */
.candle-scene { height: 8.2rem; display: flex; align-items: flex-end; justify-content: center; }
.candle-body {
  position: relative;
  width: 2.1rem; height: 5.6rem;
  border-radius: .5rem .5rem .3rem .3rem;
  background: linear-gradient(90deg, #cbb98b 0%, #f2e6c2 30%, #e9d9a8 55%, #b9a678 100%);
  box-shadow: inset 0 -10px 18px rgba(120, 96, 50, .35);
}
/* mèche */
.candle-body::before {
  content: "";
  position: absolute; left: 50%; top: -7px;
  width: 2px; height: 9px; background: #3d3327;
  transform: translateX(-50%); border-radius: 2px;
}
/* cire fondue au sommet */
.candle-body::after {
  content: "";
  position: absolute; left: -2px; right: -2px; top: -3px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e6d6ab, #f7edd0, #dcc998);
}
.candle-flame {
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  width: 22px; height: 34px;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 42% 58% / 66% 66% 34% 34%;
  background: radial-gradient(circle at 50% 82%,
    #fffbe6 0%, #ffe9a3 30%, var(--flame) 58%, #e2601c 88%, transparent 100%);
  filter: blur(.3px);
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}
/* cœur bleu de la flamme */
.candle-flame::after {
  content: "";
  position: absolute; left: 50%; bottom: 2px;
  width: 8px; height: 10px;
  transform: translateX(-50%);
  border-radius: 50% 50% 40% 60% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 90%, rgba(90, 150, 255, .8), transparent 75%);
}
.candle-halo {
  position: absolute; left: 50%; bottom: calc(100% - 6px);
  width: 120px; height: 120px;
  transform: translate(-50%, 30%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 100, .32), transparent 68%);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.candle-pop.is-lit .candle-flame {
  transform: translateX(-50%) scale(1);
  animation: tv2-flicker 1.15s ease-in-out infinite alternate;
}
.candle-pop.is-lit .candle-halo { opacity: 1; animation: tv2-halo 2.6s ease-in-out infinite alternate; }

@keyframes tv2-flicker {
  0%   { transform: translateX(-50%) scale(1) rotate(-1.6deg); }
  28%  { transform: translateX(-52%) scale(.97, 1.04) rotate(1.2deg); }
  55%  { transform: translateX(-49%) scale(1.03, .96) rotate(-.8deg); }
  100% { transform: translateX(-50%) scale(.98, 1.06) rotate(1.8deg); }
}
@keyframes tv2-halo {
  from { opacity: .55; } to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .candle-pop.is-lit .candle-flame,
  .candle-pop.is-lit .candle-halo,
  .candle-fab.is-lit .candle-fab__flame::after { animation: none; }
}

.candle-pop h3 {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--night-ink); margin-top: .9rem;
}
.candle-pop p { font-size: .92rem; line-height: 1.55; color: #cfc5ae; margin: .45rem auto 0; max-width: 30ch; }
.candle-pop__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .95rem; padding: .55rem 1.15rem;
  border-radius: 999px; font-weight: 600; font-size: .92rem;
  background: linear-gradient(120deg, #e3bd68, #b78c34);
  color: #1c1508;
  transition: transform .2s, box-shadow .2s;
}
.candle-pop__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(198,154,69,.65); }
.candle-pop__links { margin-top: .8rem; font-size: .82rem; }
.candle-pop__links a { color: #dcb763; text-decoration: none; border-bottom: 1px dotted rgba(220,183,99,.5); }
.candle-pop__links a:hover { color: #efd9a4; }
.candle-pop__count { margin-top: .7rem; font-size: .74rem; letter-spacing: .06em; color: #a89d85; }

/* Mobile : le cierge ne chevauche pas la pastille « pause » éventuelle */
@media (max-width: 640px) {
  .candle-fab span:not(.candle-fab__flame) { display: none; } /* icône seule */
  .candle-fab { padding: .6rem .7rem; }
}
/* Menu mobile ouvert → le cierge s'efface (ne flotte pas par-dessus) */
body:has(.mainnav.is-open) .candle-fab,
body:has(.mainnav.is-open) .candle-pop {
  opacity: 0; pointer-events: none; transition: opacity .2s;
}

/* ---- 8. Divers ------------------------------------------------------------ */
/* Le renvoi « pointer » suit la même gamme nocturne que le hero */
.pointer {
  background:
    radial-gradient(420px 220px at 85% 0%, rgba(198, 154, 69, .14), transparent 70%),
    var(--panel);
  border: 1px solid rgba(220, 183, 99, .18);
}

/* Impression : ni cierge ni chrome flottant */
@media print {
  .candle-fab, .candle-pop { display: none !important; }
}

/* ---- 9. Outils du tiroir mobile (recherche large + thème, même ligne) ----- */
/* Desktop : display:contents → les boutons restent exactement à leur place. */
.nav-tools { display: contents; }
@media (max-width: 1199px) {
  .nav-tools {
    display: flex; align-items: stretch; gap: .6rem;
    margin-top: 1rem; align-self: stretch;
  }
  .nav-tools .search-toggle {
    flex: 1; display: inline-flex; align-items: center; gap: .6rem;
    justify-content: flex-start;
    min-height: 3rem; padding: .6rem 1.05rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--muted);
    font-size: .92rem;
  }
  .nav-tools .search-toggle::after {
    content: attr(data-mobile-label);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-tools .theme-toggle {
    width: 3rem; min-height: 3rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper);
  }
}

/* ---- 10. Bandeau « abside » des pages intérieures (.page-hero) ------------ */
.page-hero { padding: 2rem 0 2.1rem; }
.page-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  max-width: 26ch;
}
.page-hero .breadcrumb { padding-top: 0; margin-bottom: 1.1rem; }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: #a89d85; }
.page-hero .breadcrumb a:hover { color: var(--night-ink); }
.page-hero .breadcrumb span[aria-current] { color: #cfc5ae; }
.page-hero .eyebrow { margin-bottom: .6rem; display: inline-block; }
/* Header riche des saints, déplacé tel quel dans le bandeau */
.page-hero .saint-hero { margin: 0; }
@media print {
  .page-hero { background: none !important; border: none !important; }
  .page-hero h1 {
    background: none !important; -webkit-text-fill-color: initial;
    color: #000 !important;
  }
  .page-hero .breadcrumb { display: none; }
}

/* ---- 11. Pied de page : rubriques complètes + cartes partenaires ---------- */
.site-footer nav[data-full-nav] {
  display: grid; gap: .45rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.site-footer nav[data-full-nav] a { font-size: .95rem; }

.partner-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 700px) { .partner-cards { grid-template-columns: 1fr 1fr; } }
.partner-card {
  display: flex; align-items: flex-start; gap: .95rem;
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.25rem 1.3rem;
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s;
}
.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 3px 0 -1px var(--gold-soft), var(--shadow-lg);
}
.partner-card__icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px;
  display: grid; place-items: center; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.partner-card__icon svg { width: 1.35rem; height: 1.35rem; }
.partner-card b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; display: block; }
.partner-card p { margin: .2rem 0 0; font-size: .92rem; color: var(--ink-soft); max-width: none; }
.partner-card__arrow { margin-left: auto; align-self: center; color: var(--gold); flex: none; transition: transform .2s; }
.partner-card:hover .partner-card__arrow { transform: translateX(3px); }

/* ---- 12. Lecture audio (lecture.js) --------------------------------------- */
.tts-bar {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 1rem 0 0; padding: .4rem .55rem .4rem .5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  font-family: var(--font-body); font-size: .88rem; color: var(--ink-soft);
}
.page-hero .tts-bar, .hero .tts-bar {
  background: rgba(246, 239, 224, .07);
  border-color: rgba(220, 183, 99, .35); color: #cfc5ae;
}
.tts-bar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: linear-gradient(120deg, #e3bd68, #b78c34); color: #1c1508;
  transition: transform .15s, box-shadow .2s;
}
.tts-bar button:hover { transform: scale(1.06); box-shadow: 0 4px 14px -4px rgba(198,154,69,.6); }
.tts-bar button svg { width: .95rem; height: .95rem; }
.tts-bar__stop { background: transparent !important; color: inherit !important; border: 1px solid var(--line); width: 1.8rem !important; height: 1.8rem !important; }
.tts-bar__label { letter-spacing: .02em; }
.tts-current { background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 4px; transition: background .4s; }
@media print { .tts-bar { display: none !important; } }

/* ---- 13. Veșminte : bottom-sheet mobile + repères en anneaux -------------- */
.vest-hotspot {
  width: 30px !important; height: 30px !important;
  border-radius: 50%;
  background: rgba(198, 154, 69, .18) !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(198, 154, 69, .18), 0 2px 8px rgba(0,0,0,.25) !important;
  transform: translate(-50%, -50%);
}
.vest-hotspot::after {
  content: "";
  position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  animation: tv2-ping 2.2s ease-out infinite;
}
@keyframes tv2-ping {
  0%   { transform: scale(.75); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.vest-hotspot.is-active { background: var(--gold) !important; }
.vest-hotspot:hover::before, .vest-hotspot:focus-visible::before {
  content: attr(aria-label);
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  white-space: nowrap; font-size: .74rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--night); color: var(--night-ink);
  border: 1px solid rgba(220, 183, 99, .4);
  pointer-events: none; z-index: 5;
}
@media (prefers-reduced-motion: reduce) { .vest-hotspot::after { animation: none; } }
@media (max-width: 699px) {
  .vest-popover {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important;
    max-height: 62dvh; overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, .45);
    z-index: 80;
  }
}

/* === FIX HERO CROSS STABLE 2026-07-05 ===
   La croix du bandeau doit rester au même endroit en thème clair et sombre.
   Cause corrigée : styles.css contenait un [data-theme="dark"] .hero avec moins
   de calques de background, ce qui décalait la croix en mode sombre. */
.hero,
[data-theme="dark"] .hero {
  background-color: var(--night);
  background-image:
    radial-gradient(1100px 520px at 78% -10%,
      rgba(198, 154, 69, .28), rgba(198, 154, 69, .07) 45%, transparent 70%),
    radial-gradient(700px 420px at 12% 112%,
      rgba(136, 53, 53, .16), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='392' viewBox='0 0 24 32' fill='none' stroke='%23c69a45' stroke-opacity='0.14' stroke-width='0.9' stroke-linecap='round'%3E%3Cline x1='12' y1='3' x2='12' y2='29'/%3E%3Cline x1='8.5' y1='7.5' x2='15.5' y2='7.5'/%3E%3Cline x1='5' y1='12.5' x2='19' y2='12.5'/%3E%3Cline x1='8' y1='24' x2='16' y2='19.5'/%3E%3C/svg%3E"),
    linear-gradient(165deg, #1a1d28 0%, var(--night) 55%, #16130f 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    center top,
    left bottom,
    right clamp(24px, 5vw, 72px) center,
    center;
  background-size:
    auto,
    auto,
    auto clamp(210px, 24vw, 360px),
    auto;
}

.page-hero,
[data-theme="dark"] .page-hero {
  min-height: clamp(230px, 22vw, 320px);
  display: flex;
  align-items: center;
}

.page-hero .wrap {
  width: 100%;
}

@media (max-width: 760px) {
  .hero,
  [data-theme="dark"] .hero,
  .page-hero,
  [data-theme="dark"] .page-hero {
    background-position:
      center top,
      left bottom,
      right -24px center,
      center;
    background-size:
      auto,
      auto,
      auto 190px,
      auto;
  }

  .page-hero,
  [data-theme="dark"] .page-hero {
    min-height: 210px;
  }
}

/* === FINAL FIX VESTMENTS POPOVER 2026-07 START === */

/* Page vêtements : le popover est attaché à l'image, pas à l'écran. */
html body [data-vestments] .vest-stage {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html body [data-vestments] .vest-photo {
  position: relative !important;
  overflow: visible !important;
}

/* Desktop/tablette : fiche claire en thème clair, qui scrolle avec la page. */
html body [data-vestments] .vest-popover {
  position: absolute !important;
  z-index: 80 !important;
  width: 20rem !important;
  max-width: calc(100% - 24px) !important;
  max-height: 28rem !important;
  overflow-y: auto !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 34%, var(--line)) !important;
  border-radius: 14px !important;
  box-shadow:
    0 16px 44px -20px rgba(20, 18, 16, .35),
    0 6px 18px -10px rgba(20, 18, 16, .24) !important;
  padding: 1.15rem 1.2rem 1.05rem !important;
}

html body [data-vestments] .vest-popover__close {
  position: absolute !important;
  top: .55rem !important;
  right: .55rem !important;
  z-index: 2 !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ink) 7%, transparent) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
}

html body [data-vestments] .vest-popover__close:hover {
  background: var(--gold-soft) !important;
  color: #1c1a15 !important;
}

html body [data-vestments] .vest-popover__title {
  color: var(--gold) !important;
  margin-right: 2rem !important;
}

html body [data-vestments] .vest-popover__field {
  color: var(--ink) !important;
}

html body [data-vestments] .vest-popover__field span {
  color: var(--gold) !important;
}

/* En thème sombre : fiche sombre, texte clair. */
html[data-theme="dark"] body [data-vestments] .vest-popover,
body[data-theme="dark"] [data-vestments] .vest-popover {
  background: #12110f !important;
  color: #f7efe2 !important;
  border-color: rgba(220, 183, 99, .34) !important;
  box-shadow:
    0 20px 55px -18px rgba(0,0,0,.70),
    0 8px 20px -10px rgba(0,0,0,.55) !important;
}

html[data-theme="dark"] body [data-vestments] .vest-popover__close,
body[data-theme="dark"] [data-vestments] .vest-popover__close {
  background: rgba(255,255,255,.08) !important;
  color: #f7efe2 !important;
  border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] body [data-vestments] .vest-popover__field,
body[data-theme="dark"] [data-vestments] .vest-popover__field {
  color: #f7efe2 !important;
}

html[data-theme="dark"] body [data-vestments] .vest-popover__title,
html[data-theme="dark"] body [data-vestments] .vest-popover__field span,
body[data-theme="dark"] [data-vestments] .vest-popover__title,
body[data-theme="dark"] [data-vestments] .vest-popover__field span {
  color: #d7b467 !important;
}

/* Hotspots : zone de clic gardée, repère visuel plus petit et précis. */
html body [data-vestments] .vest-hotspot {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  padding: 0 !important;
}

html body [data-vestments] .vest-hotspot span {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background: var(--gold-soft) !important;
  border: 1px solid rgba(18, 17, 15, .85) !important;
  box-shadow:
    0 0 0 2px rgba(246, 245, 242, .9),
    0 0 0 4px rgba(198, 154, 69, .28) !important;
  animation: none !important;
}

html body [data-vestments] .vest-hotspot::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 15px !important;
  height: 15px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(198, 154, 69, .65) !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

html body [data-vestments] .vest-hotspot:hover span,
html body [data-vestments] .vest-hotspot:focus-visible span,
html body [data-vestments] .vest-hotspot.is-active span {
  background: var(--burgundy) !important;
  box-shadow:
    0 0 0 2px rgba(246, 245, 242, .94),
    0 0 0 4px rgba(136, 53, 53, .28) !important;
}

html body [data-vestments] .vest-hotspot:hover::after,
html body [data-vestments] .vest-hotspot:focus-visible::after,
html body [data-vestments] .vest-hotspot.is-active::after {
  border-color: rgba(136, 53, 53, .8) !important;
}

/* Mobile : bottom-sheet, comme prévu. */
@media (max-width: 699px) {
  html body [data-vestments] .vest-popover {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 62dvh !important;
    overflow-y: auto !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;
  }
}

/* === FINAL FIX VESTMENTS POPOVER 2026-07 END === */

/* ---- FIX CANDLE + VESTMENTS MOBILE (2026-07) --------------------------------
   Sur mobile (< 700 px), le bottom-sheet des vêtements liturgiques est fixé
   en bas de l'écran. Le bouton bougie (.candle-fab) y est aussi et chevauche
   le panneau. Quand vestments.js ouvre un hotspot, il ajoute la classe
   .candle-hidden sur <body> ; on masque alors le bouton bougie avec une
   transition douce. À la fermeture, la classe est retirée et la bougie revient.
   Sur desktop (>= 700 px), le popover est absolu et ne chevauche pas la bougie :
   cette règle ne s'applique pas (media query + classe conditionnelle JS).
   --------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .candle-hidden .candle-fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
}

/* =========================================================================
   14. Barre d'outils de lecture unifiée (confort + audio) & Mode Confort
   ========================================================================= */
.reading-bar {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 1.2rem 0 0;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--ink-soft);
  z-index: 10;
  position: relative;
  max-width: 100%;
  flex-wrap: wrap;
}

.page-hero .reading-bar,
.hero .reading-bar {
  background: rgba(246, 239, 224, .07);
  border-color: rgba(220, 183, 99, .35);
  color: #cfc5ae;
}

.reading-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .35rem .65rem;
  min-height: 2.75rem;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color .15s, color .15s, transform .1s;
}

.reading-bar__btn:hover {
  background-color: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--ink);
}

.reading-bar__btn--comfort.is-active {
  background-color: var(--gold);
  color: #1c1508 !important;
  font-weight: 600;
}

.reading-bar__icon-aa {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.reading-bar__separator {
  width: 1px;
  height: 1.2rem;
  background-color: var(--line);
  margin: 0 .2rem;
}

.reading-bar__btn--play,
.reading-bar__btn--stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(120deg, #e3bd68, #b78c34);
  color: #1c1508;
  border: none;
  transition: transform .15s, box-shadow .2s;
}

.reading-bar__btn--play:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px -4px rgba(198,154,69,.6);
}

.reading-bar__btn--stop {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid var(--line) !important;
}

.reading-bar__btn--play svg {
  width: .95rem;
  height: .95rem;
}

/* Cache le texte du bouton sur petit mobile pour garder uniquement l'icône aA */
@media (max-width: 480px) {
  .reading-bar {
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
    padding: .45rem;
  }

  .reading-bar__btn--comfort {
    min-width: 2.75rem;
  }

  .reading-bar__btn-text {
    display: none;
  }
}

@media print {
  .reading-bar {
    display: none !important;
  }
}

/* --- Mode Lecture Confortable Actif --- */
body.reading-mode-active {
  --reading: 46rem; /* Largeur de ligne idéale pour le confort de lecture */
}

body.reading-mode-active .wrap--reading,
body.reading-mode-active .scripture-page .wrap--reading {
  max-width: min(100%, var(--reading)) !important;
}

/* Augmente la taille et l'interligne des paragraphes de lecture */
body.reading-mode-active .prose p,
body.reading-mode-active .saint-block--life p,
body.reading-mode-active .prayer--long,
body.reading-mode-active .scripture-text,
body.reading-mode-active .scripture-verse,
body.reading-mode-active .article p,
body.reading-mode-active .prose li {
  font-size: clamp(1.12rem, 1rem + .55vw, 1.25rem) !important;
  line-height: 1.88 !important;
  margin-bottom: 1.6rem !important;
  color: var(--ink) !important; /* Meilleur contraste en mode Byzantin clair/sombre */
}

/* Adaptations spécifiques pour les Écritures (Bible/Psautier) */
body.reading-mode-active .scripture-text p {
  margin-bottom: 0.8rem !important;
}

body.reading-mode-active .scripture-verse {
  padding-block: .45rem !important;
}

body.reading-mode-active .scripture-verse__num {
  font-size: 0.95rem !important;
  margin-right: 0.45rem !important;
}

/* Espacement plus aéré pour les listes de définitions / glossaire */
body.reading-mode-active .glossary-list .glossary-item dd {
  font-size: 1.15rem !important;
  line-height: 1.85 !important;
}

/* Augmentation de la lisibilité des titres et séparations */
body.reading-mode-active h1.saint-hero__name,
body.reading-mode-active h1.article-title,
body.reading-mode-active .prose h2,
body.reading-mode-active .saint-block__title {
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body.reading-mode-active .prose a,
body.reading-mode-active .article a,
body.reading-mode-active .scripture-text a,
body.reading-mode-active .saint-block a {
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}

/* Espace supplémentaire pour ne pas superposer le texte avec le cierge ou les bannières mobiles */
body.reading-mode-active article.article,
body.reading-mode-active article.saint,
body.reading-mode-active .scripture-wrap {
  padding-bottom: 5rem !important;
}

@media (max-width: 700px) {
  body.reading-mode-active {
    --reading: 100%;
  }

  body.reading-mode-active .prose p,
  body.reading-mode-active .saint-block--life p,
  body.reading-mode-active .prayer--long,
  body.reading-mode-active .scripture-text,
  body.reading-mode-active .scripture-verse,
  body.reading-mode-active .article p,
  body.reading-mode-active .prose li {
    font-size: 1.14rem !important;
    line-height: 1.86 !important;
  }

  body.reading-mode-active .glossary-list .glossary-item dd {
    font-size: 1.08rem !important;
  }
}

/* =========================================================================
   15. Correctifs integration post-deploiement : nav, contraste, cierge
   ========================================================================= */

/* Header : une seule source d'autorite en fin de cascade.
   Le menu complet est trop dense sous 1536px ; on y force donc le tiroir. */
.site-header,
.site-header__inner {
  overflow: visible !important;
}

.site-header__inner {
  position: relative !important;
}

@media (max-width: 1799px) {
  .site-header__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: .75rem !important;
    min-height: 4.25rem !important;
    padding-inline: clamp(.9rem, 3vw, 1.35rem) !important;
  }

  .site-header .brand {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .site-header .brand__text {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(1.03rem, 2.6vw, 1.2rem) !important;
  }

  .site-header .brand__text em {
    display: none !important;
  }

  .site-header .nav-toggle {
    display: flex !important;
    grid-column: 2 !important;
    justify-self: end !important;
    flex: 0 0 auto !important;
    width: 2.55rem !important;
    height: 2.55rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
  }

  .site-header .mainnav,
  .site-header .mainnav:not(.is-open) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: clamp(.75rem, 3vw, 1.25rem) !important;
    right: clamp(.75rem, 3vw, 1.25rem) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
    min-width: 0 !important;
    max-height: calc(100vh - 4.75rem) !important;
    max-height: calc(100dvh - 4.75rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: .7rem .95rem calc(1rem + env(safe-area-inset-bottom)) !important;
    border: 1px solid var(--line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 1001 !important;
  }

  .site-header .mainnav.is-open {
    display: flex !important;
  }

  .site-header .mainnav.is-open > * {
    flex-shrink: 0 !important;
  }

  .site-header .mainnav__list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .site-header .mainnav__list li {
    border-bottom: 1px solid var(--line) !important;
  }

  .site-header .mainnav__list a {
    display: flex !important;
    align-items: center !important;
    min-height: 3rem !important;
    padding: .85rem .35rem !important;
    white-space: normal !important;
    font-size: 1rem !important;
  }

  .site-header .search-toggle,
  .site-header .theme-toggle,
  .site-header .translate-help,
  .site-header .lang-switch {
    align-self: stretch !important;
  }

  .site-header .lang-switch {
    display: flex !important;
    gap: .45rem !important;
    border: 0 !important;
    background: transparent !important;
  }

  .site-header .lang-switch a {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-height: 2.75rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
  }
}

@media (min-width: 1800px) {
  .site-header__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .55rem !important;
    max-width: min(100rem, calc(100% - 2rem)) !important;
    min-height: 4.45rem !important;
    padding-inline: 1rem !important;
  }

  .site-header .brand {
    flex: 0 1 15rem !important;
    min-width: 9rem !important;
    max-width: 15rem !important;
    width: auto !important;
  }

  .site-header .brand__text {
    min-width: 0 !important;
    max-width: 18ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.08rem !important;
  }

  .site-header .brand__text em {
    display: none !important;
  }

  .site-header .nav-toggle {
    display: none !important;
  }

  .site-header .mainnav,
  .site-header .mainnav.is-open {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .28rem !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .site-header .mainnav__list {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .02rem !important;
  }

  .site-header .mainnav__list li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    border-bottom: 0 !important;
  }

  .site-header .mainnav__list a {
    display: inline-flex !important;
    min-height: 0 !important;
    max-width: 9.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: .34rem .28rem !important;
    font-size: clamp(.67rem, .55vw, .79rem) !important;
    letter-spacing: 0 !important;
  }

  .site-header .lang-switch {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .site-header .lang-switch a {
    min-height: 0 !important;
    padding: .3rem .42rem !important;
    border: 0 !important;
    font-size: .76rem !important;
  }

  .site-header .search-toggle,
  .site-header .theme-toggle {
    flex: 0 0 auto !important;
    width: 2.12rem !important;
    height: 2.12rem !important;
  }

  .site-header .translate-help {
    flex: 0 0 auto !important;
    margin: 0 0 0 .15rem !important;
  }

  .site-header .translate-help__label {
    display: none !important;
  }

  .site-header .translate-help__btn {
    width: 2.18rem !important;
    min-height: 2.12rem !important;
    justify-content: center !important;
    padding-inline: 0 !important;
  }
}

/* Surfaces sombres : les enfants ne doivent jamais revenir aux couleurs
   globales pensees pour fond clair. */
.pointer,
.mindful-pause,
.site-footer {
  color: var(--panel-ink) !important;
}

.pointer :is(h1, h2, h3, p, li, span, strong, em),
.mindful-pause :is(h1, h2, h3, p, li, span, strong, em),
.site-footer :is(p, span, b, strong, em) {
  color: inherit !important;
}

.pointer a,
.mindful-pause a,
.site-footer a {
  color: #f0d28a !important;
  text-decoration-color: rgba(240, 210, 138, .65) !important;
}

.pointer a:hover,
.mindful-pause a:hover,
.site-footer a:hover {
  color: #fff3d0 !important;
}

.site-footer__tag,
.site-footer__disclaimer {
  color: #ded4c0 !important;
}

.site-footer__note {
  color: #cfc3ad !important;
  border-top-color: rgba(240, 210, 138, .24) !important;
}

.site-footer nav .soon {
  color: #9f927b !important;
}

.site-footer__report-container {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: .85rem;
  border-top-color: rgba(240, 210, 138, .28) !important;
}

.site-footer__report-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #f0d28a !important;
  border-bottom: 1px dotted rgba(240, 210, 138, .65);
  text-decoration: none !important;
}

.site-footer__report-icon {
  width: .875rem;
  height: .875rem;
  flex: none;
}

.site-footer__report-link:hover,
.site-footer__report-link:focus-visible {
  color: #fff3d0 !important;
  border-bottom-color: currentColor;
}

/* Cierge : reserve basse et effacement quand le footer entre dans la zone
   visible. La classe est posee par candle.js, avec repli CSS pour le menu. */
body {
  --candle-safe-bottom: max(1rem, env(safe-area-inset-bottom));
}

.candle-fab {
  bottom: var(--candle-safe-bottom) !important;
}

.candle-pop {
  bottom: calc(var(--candle-safe-bottom) + 3.6rem) !important;
}

body.candle-near-footer .candle-fab,
body.candle-near-footer .candle-pop,
body:has(.site-footer:hover) .candle-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 640px) {
  .candle-fab {
    left: auto !important;
    right: max(.85rem, env(safe-area-inset-right)) !important;
  }

  .candle-pop {
    left: auto !important;
    right: max(.85rem, env(safe-area-inset-right)) !important;
  }
}

/* Correctifs mobiles post-publication : les bandeaux interieurs ne doivent
   jamais garder la composition desktop, et les renvois sombres doivent rester
   lisibles meme quand les mots sont enrichis par le lexique JS. */
@media (max-width: 700px) {
  .wrap--reading {
    max-width: 100% !important;
  }

  .article {
    padding-inline: 0 !important;
  }

  .page-hero,
  [data-theme="dark"] .page-hero {
    display: block !important;
    min-height: 0 !important;
    align-items: initial !important;
    padding: clamp(1.35rem, 7vw, 2rem) 0 1.25rem !important;
    margin: 0 0 1.1rem !important;
    overflow: visible !important;
  }

  .page-hero .eyebrow {
    display: block !important;
    max-width: 100% !important;
    margin: 0 0 .65rem !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
    letter-spacing: .1em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .page-hero h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(2.05rem, 10vw, 2.7rem) !important;
    line-height: 1.03 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  .page-hero .lead {
    max-width: 100% !important;
    margin: .95rem 0 0 !important;
    font-size: 1.04rem !important;
    line-height: 1.58 !important;
    color: var(--ink-soft) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .page-hero .reading-bar {
    display: inline-flex !important;
    max-width: 100% !important;
    margin: .95rem 0 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    vertical-align: top !important;
  }

  .page-hero .reading-bar__label {
    display: none !important;
  }

  .page-hero .reading-bar__btn {
    flex: 0 0 auto !important;
  }

  .page-hero .reading-bar__separator {
    flex: 0 0 1px !important;
    margin-inline: .05rem !important;
  }

  .pointer {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 2rem 0 1rem !important;
    padding: 1.35rem 1.25rem !important;
    overflow: visible !important;
  }

  .pointer,
  .pointer p,
  .pointer li,
  .pointer span:not(.pointer__label),
  .pointer strong,
  .pointer em {
    color: #f6efe3 !important;
  }

  .pointer p {
    display: block !important;
    max-width: 100% !important;
    margin: .7rem 0 0 !important;
    font-size: 1.04rem !important;
    line-height: 1.62 !important;
    opacity: 1 !important;
    transform: none !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .pointer__label {
    color: #f6efe3 !important;
    opacity: .92 !important;
  }

  .pointer a,
  .pointer .map-ref,
  .pointer__map,
  .pointer__ask {
    color: #f0d28a !important;
    text-decoration-color: rgba(240, 210, 138, .75) !important;
  }

  .pointer__map,
  .pointer__ask {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
    line-height: 1.35 !important;
    transform: none !important;
  }

  .pointer__map + .pointer__ask,
  .pointer__ask + .pointer__map {
    margin-left: 0 !important;
    margin-right: 1rem !important;
  }
}

/* Final guard for dark callouts: iOS/WebKit can keep a dark text fill even
   when `color` resolves correctly, especially after lexicon markup is added. */
.pointer {
  --panel-ink: #f6efe3;
  color: #f6efe3 !important;
  -webkit-text-fill-color: #f6efe3 !important;
}

.pointer :is(p, li, span, strong, em, abbr),
.pointer :is(h1, h2, h3, h4, h5, h6),
.pointer p,
.pointer p::first-letter,
.pointer p * {
  color: #f6efe3 !important;
  -webkit-text-fill-color: #f6efe3 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.pointer__label {
  color: #f6efe3 !important;
  -webkit-text-fill-color: #f6efe3 !important;
}

.pointer a,
.pointer a *,
.pointer .map-ref,
.pointer__map,
.pointer__ask,
.pointer p abbr.ortho-term {
  color: #f0d28a !important;
  -webkit-text-fill-color: #f0d28a !important;
  text-decoration-color: rgba(240, 210, 138, .75) !important;
}

/* Scripture/Psalter source credits: keep attribution readable at every width. */
.source-credit {
  display: block !important;
  width: min(100%, 44rem) !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: .75rem 1rem !important;
  border-radius: 1rem !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.source-credit a {
  display: inline !important;
  overflow-wrap: anywhere !important;
}

/* Lightweight display diagnostic prompt. It appears only when JS detects a
   likely visible issue, and links to the existing contact form. */
.display-report {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 4200;
  width: min(24rem, calc(100% - 2rem));
  padding: .85rem .95rem;
  border: 1px solid rgba(240, 210, 138, .55);
  border-radius: 14px;
  background: color-mix(in srgb, #15120d 94%, var(--gold-soft));
  color: #f8f0df;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.display-report[hidden] {
  display: none !important;
}

.display-report__title {
  margin: 0 1.8rem .25rem 0;
  color: #fff3d0;
  font-weight: 700;
  font-size: .95rem;
}

.display-report__text {
  margin: 0;
  color: #e7dcc7;
  font-size: .88rem;
  line-height: 1.45;
}

.display-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}

.display-report__actions a,
.display-report__actions button,
.display-report__close {
  min-height: 2.35rem;
  border-radius: 999px;
}

.display-report__actions a {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  background: #d6aa4f;
  color: #19130b;
  font-weight: 700;
  text-decoration: none;
}

.display-report__actions button,
.display-report__close {
  border: 1px solid rgba(240, 210, 138, .35);
  color: #f0d28a;
}

.display-report__actions button {
  padding: .35rem .8rem;
}

.display-report__close {
  position: absolute;
  top: .45rem;
  right: .5rem;
  width: 2.1rem;
}

@media (max-width: 640px) {
  .display-report {
    left: max(.85rem, env(safe-area-inset-left));
    right: max(.85rem, env(safe-area-inset-right));
    bottom: calc(max(.85rem, env(safe-area-inset-bottom)) + 3.35rem);
    width: auto;
  }
}

/* Contribution flow: visible only as a contextual CTA, not as an intrusive form
   on every page. The full structured form lives on /contribuer/. */
.contribution-cta {
  display: grid;
  gap: 1rem;
  align-items: center;
  margin: 2.4rem 0 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 62%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, var(--gold-soft));
  box-shadow: var(--shadow-sm);
}

.contribution-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
}

.contribution-cta__text {
  margin: .25rem 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.contribution-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1f170b;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.contribution-cta__link:hover,
.contribution-cta__link:focus-visible {
  background: var(--gold-soft);
  color: #1f170b;
}

.contribution-format {
  margin: 1rem 0 1.5rem;
  padding: .95rem 1rem;
  border-left: 3px solid var(--gold);
  background: var(--band);
  color: var(--ink-soft);
  line-height: 1.55;
}

.contribution-form textarea {
  min-height: 14rem;
}

@media (min-width: 760px) {
  .contribution-cta {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 640px) {
  .contribution-cta {
    margin-top: 2rem;
    padding: 1rem;
  }

  .contribution-cta__link {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* =========================================================================
   16. Transformation « premium » (juillet 2026) — accueil, hubs, glossaire
   -------------------------------------------------------------------------
   Nouveaux composants du design system. Tout est piloté par les jetons de
   styles.css : le mode sombre reste intact, mobile d'abord.
   ========================================================================= */

/* ---- 16.1 « Je commence ici » : trois grandes portes numérotées --------- */
.start-grid {
  display: grid;
  gap: 1.05rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 760px) {
  .start-grid { grid-template-columns: repeat(3, 1fr); }
}
.start-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 100%;
  padding: 1.55rem 1.4rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s;
}
.start-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold), transparent 85%);
  opacity: .85;
}
.start-card:hover,
.start-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.start-card__step {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.start-card__title {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.start-card__desc {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: none;
}
.start-card__go {
  margin-top: auto;
  padding-top: .8rem;
  font-weight: 650;
  font-size: .92rem;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.start-card__go::after { content: "\2192"; transition: transform .2s; }
.start-card:hover .start-card__go::after { transform: translateX(3px); }

/* ---- 16.2 La boussole du débutant (details/summary, zéro JS requis) ----- */
.compass {
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 760px) {
  .compass { grid-template-columns: 1fr 1fr; }
  /* un panneau ouvert prend toute la largeur : la « carte » respire */
  .compass details[open] { grid-column: 1 / -1; }
}
.compass details {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s;
}
.compass details[open] {
  box-shadow: inset 0 3px 0 -1px var(--gold-soft), var(--shadow);
}
.compass summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.3rem;
  padding: .9rem 1.1rem;
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink);
  transition: background-color .15s;
}
.compass summary::-webkit-details-marker { display: none; }
.compass summary:hover {
  background-color: color-mix(in srgb, var(--gold) 8%, transparent);
}
.compass summary::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-soft) 25%, transparent);
  transition: background .2s;
}
.compass details[open] summary::before { background: var(--burgundy); }
.compass summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .25s;
}
.compass details[open] summary::after { transform: rotate(225deg); }
.compass__body {
  padding: .15rem 1.15rem 1.2rem;
  border-top: 1px dashed var(--line);
  margin-top: 0;
}
.compass__body p {
  margin: .8rem 0 0;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 62ch;
}
.compass__links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .95rem;
}
.compass__links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.65rem;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 55%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, var(--gold-soft));
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.compass__links a:hover,
.compass__links a:focus-visible {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--surface) 76%, var(--gold-soft));
  transform: translateY(-1px);
}
.compass__note {
  margin-top: 1.2rem;
  font-size: .88rem;
  font-style: italic;
  color: var(--muted);
}

/* ---- 16.3 Bandeau « Aujourd'hui dans l'Église » (accueil) --------------- */
.today-banner {
  display: grid;
  gap: 1.1rem;
  align-items: center;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius);
  color: var(--night-ink);
  background:
    radial-gradient(560px 260px at 85% 0%, rgba(198, 154, 69, .2), transparent 70%),
    linear-gradient(165deg, var(--night-2), var(--night));
  border: 1px solid rgba(220, 183, 99, .28);
  box-shadow: var(--shadow);
}
@media (min-width: 760px) {
  .today-banner { grid-template-columns: minmax(0, 1fr) auto; padding: 1.8rem 2rem; }
}
.today-banner__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--night-ink);
  margin: 0;
}
.today-banner__text {
  margin: .45rem 0 0;
  font-size: .97rem;
  line-height: 1.6;
  color: #cfc5ae;
  max-width: 56ch;
}
.today-banner .btn--primary {
  background: linear-gradient(120deg, #e3bd68 0%, #c69a45 55%, #a87f2c 100%);
  color: #1c1508;
  box-shadow: 0 6px 22px -6px rgba(198, 154, 69, .5);
  white-space: nowrap;
}
.today-banner .btn--primary:hover {
  background: linear-gradient(120deg, #efcb79 0%, #d3a751 55%, #b78c34 100%);
}
@media (max-width: 640px) {
  .today-banner .btn--primary { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* ---- 16.4 Timeline des 7 étapes (Découvrir l'Orthodoxie) ---------------- */
.steps-container { counter-reset: tv2step; }
.steps-container .step-item {
  position: relative;
  padding: 0 0 2.3rem 3.6rem;
}
.steps-container .step-item::before {
  counter-increment: tv2step;
  content: counter(tv2step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1508;
  background: linear-gradient(135deg, #e3bd68, #c69a45);
  box-shadow: 0 4px 14px -4px rgba(198, 154, 69, .55);
}
.steps-container .step-item::after {
  content: "";
  position: absolute; left: 1.2rem; top: 2.65rem; bottom: .35rem;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-soft) 45%, transparent), transparent);
}
.steps-container .step-item:last-child { padding-bottom: .5rem; }
.steps-container .step-item:last-child::after { display: none; }
.step-item__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.steps-container .step-item p { margin: 0; color: var(--ink-soft); line-height: 1.66; }

/* ---- 16.5 Encadrés « En résumé » / « Comment avancer » ------------------ */
.callout {
  position: relative;
  margin: 2.2rem 0;
  padding: 1.3rem 1.35rem 1.2rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--gold-soft));
  border: 1px solid color-mix(in srgb, var(--gold-soft) 38%, var(--line));
  box-shadow: var(--shadow-sm);
}
.callout::before {
  content: "";
  position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}
.callout--practical::before {
  background: linear-gradient(180deg, var(--gold), var(--burgundy));
}
.callout__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .45rem;
}
.callout p, .callout li {
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.62;
  margin: 0;
}
.callout ul {
  margin: .35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.callout ul li {
  padding-left: 1.15rem;
  position: relative;
}
.callout ul li::before {
  content: "\2726";
  position: absolute; left: 0; top: 0;
  color: var(--gold);
  font-size: .8rem;
}
.callout a { color: var(--gold); font-weight: 600; text-decoration-color: var(--gold-soft); }
.callout a:hover { color: var(--burgundy); }

/* ---- 16.6 Glossaire : cartes, index et filtre ---------------------------- */
.glossary-list {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.glossary-item {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.2rem 1.3rem 1.1rem;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 6rem;
}
.glossary-item dt {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
}
.glossary-item dt .glossary-alt {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 400;
  color: var(--muted);
}
.glossary-item dd {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.62;
  color: var(--ink-soft);
}
.glossary-see {
  margin-top: .5rem;
  font-size: .85rem;
  font-style: italic;
}
.glossary-see a { color: var(--gold); font-weight: 600; }
.glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.6rem 0 0;
  padding: 0;
}
.glossary-index a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.glossary-index a:hover,
.glossary-index a:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  background: color-mix(in srgb, var(--surface) 90%, var(--gold-soft));
}
/* le filtre pose l'attribut hidden : il doit gagner sur display:inline-flex */
.glossary-index a[hidden],
.glossary-item[hidden] { display: none !important; }
.glossary-search {
  margin-top: 1.8rem;
}
.glossary-search input {
  width: 100%;
  min-height: 3rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .98rem;
  box-shadow: var(--shadow-sm);
}
.glossary-search input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.glossary-empty {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-style: italic;
}

/* ---- 16.7 Pied de page : rubriques groupées ------------------------------ */
.site-footer nav[data-full-nav].is-grouped {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .site-footer nav[data-full-nav].is-grouped {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.footer-group { display: flex; flex-direction: column; gap: .4rem; }
.footer-group__title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #dcb763 !important;
  margin-bottom: .35rem;
}
.site-footer nav[data-full-nav].is-grouped a {
  font-size: .95rem;
  width: fit-content;
}

/* ---- 16.8 « Aujourd'hui dans l'Église » : rangée d'actions rapides ------- */
.today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.4rem 0 0;
}
.today-actions a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 50%, var(--line));
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s, box-shadow .2s;
}
.today-actions a:hover,
.today-actions a:focus-visible {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Titre de liste des pages hub de section (générées par build_hubs.py) */
.hub-list-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.2rem 0 1.1rem;
  color: var(--ink);
}

/* ---- 16.9 Filtres de la liste des saints (puces par catégorie) ----------- */
.saint-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .9rem;
}
.saint-filters__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .3rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.saint-filters__chip:hover,
.saint-filters__chip:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.saint-filters__chip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #1c1508;
}

.saint-card__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
  margin-bottom: .65rem;
}

.saint-card__topline .saint-card__meta {
  margin: 0;
}

.saint-card__akathist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: .14rem .62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  background: color-mix(in srgb, var(--gold-soft) 18%, transparent);
  color: var(--burgundy);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.saint-card__akathist:hover,
.saint-card__akathist:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.saint-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1rem 0 0;
}

.saint-hero__akathist {
  max-width: 100%;
}

.saint-block--akathist {
  scroll-margin-top: 6rem;
}

/* Les deux CTA du renvoi « pointer » ne doivent jamais se toucher */
.pointer__map + .pointer__ask,
.pointer__ask + .pointer__map {
  margin-left: 1.1rem !important;
  margin-right: 0 !important;
}

/* Impression : la boussole et les encadrés restent sobres */
@media print {
  .compass summary::after, .compass summary::before { display: none; }
  .start-card::before, .callout::before { display: none; }
}

/* ---- 16.10 Repli si la carte (Leaflet) ne peut pas se charger ------------ */
.map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 220px;
  margin: 0;
  padding: 1.6rem 1.4rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--gold-soft));
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.6;
}

/* ---- 16.11 Carte paroisses stable sur mobile ---------------------------- */
.map-page {
  max-width: 100%;
}

.map-page .eyebrow,
.map-page h1,
.map-page__lead,
.map-page__first {
  text-align: center;
}

.map-page .eyebrow {
  margin-bottom: .5rem;
}

.map-page h1 {
  margin-inline: auto;
}

.map-page__lead {
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.map-page__first {
  margin: 0 0 1.5rem;
}

.map--parish {
  position: relative;
  width: 100%;
  min-height: 28rem;
  height: clamp(28rem, 70dvh, 38rem);
  margin-bottom: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  z-index: 1;
  overflow: hidden;
}

.map--parish.leaflet-container {
  font-family: var(--font-body);
}

.map-directory-card {
  min-width: 0;
  padding: clamp(1.35rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.map-directory-card h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  color: var(--ink);
}

.map-directory-card p {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}

.map-directory-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .65rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--burgundy);
  color: var(--panel-ink);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.map-directory-card__link:hover,
.map-directory-card__link:focus-visible {
  background: var(--ink);
  color: var(--panel-ink);
}

@media (max-width: 640px) {
  .map-page__lead {
    margin-bottom: 1.35rem;
  }

  .map--parish {
    min-height: 26rem;
    height: 66dvh;
    margin-bottom: 2rem;
    border-radius: 10px;
  }

  .map-directory-card {
    padding: 1.25rem;
  }
}

/* ---- 16.12 Formulaires premium (contact / question / prière) ------------- */
/* S'applique a .prayer-form partout (contact, pune-o-intrebare, rugaciune) :
   une seule feuille, trois formulaires eleves d'un coup. */

.contact-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 1.6rem 0;
}

.contact-direct .btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.prayer-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: min(100%, 54rem);
  margin: 2rem 0 0;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold-soft) 10%, transparent),
      transparent 8rem),
    color-mix(in srgb, var(--surface) 97%, var(--gold-soft) 3%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Filet d'or discret en tete de carte, echo du filet du hero / de l'en-tete */
.prayer-form::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--gold-soft), var(--gold), var(--gold-soft), transparent);
  opacity: .85;
}

.prayer-form .form-group,
.prayer-form .form-check,
.prayer-form .prayer-disclaimer,
.prayer-form .prayer-form__actions,
.prayer-form .prayer-form__hint,
.prayer-form .prayer-msg {
  position: relative;
  z-index: 1;
}

.form-group {
  display: grid;
  gap: .42rem;
  min-width: 0;
  margin: 0;
}

/* Label : petite marque en losange dore, sans tout mettre en capitales
   (les libelles sont parfois des phrases entieres). */
.form-group label {
  position: relative;
  padding-left: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.form-group label::before {
  content: "";
  position: absolute; left: 0; top: .38em;
  width: .48rem; height: .48rem;
  background: var(--gold-soft);
  transform: rotate(45deg);
  border-radius: 2px;
}
.form-group:focus-within label {
  color: var(--burgundy);
}
.form-check label { padding-left: 0; }
.form-check label::before { content: none; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.85rem;
  font: inherit;
  color: var(--ink);
  background-color: var(--paper);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  padding-block: .72rem;
  padding-inline: .9rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--ring);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); opacity: 1; }

.form-group textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.55;
}

/* Selecteur de motif : fleche dessinee en degrades (pas d'image, pas de
   couleur en dur : elle suit --ink-soft, donc s'adapte au theme sombre). */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) center, calc(100% - 1.05rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form-group select option[disabled] { color: var(--muted); }

/* La reponse au captcha n'a besoin que de deux chiffres. */
.form-group input[type="number"] { max-width: 7rem; }

/* Case confidentialite : surface discrete, plus confortable au doigt. */
.form-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--band) 55%, transparent);
  border: 1px solid var(--line);
}
.form-check input[type="checkbox"] {
  width: 1.2rem; height: 1.2rem;
  flex: none;
  margin: .12rem 0 0;
  border-radius: 4px;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-check label {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.form-check a { color: var(--burgundy); }
.form-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.prayer-disclaimer {
  margin: .1rem 0 0;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
  font-style: italic;
  line-height: 1.55;
}

.prayer-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: .15rem;
}

.prayer-form__actions .btn {
  min-height: 2.75rem;
  max-width: 100%;
}

.prayer-form__hint {
  max-width: 62ch;
  margin: -.25rem 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

/* Bouton d'envoi : etat en cours sobre, sans texte fige en dur dans le CSS. */
.prayer-form__actions .btn[disabled] {
  opacity: .55;
  cursor: wait;
  transform: none !important;
}

.prayer-msg[hidden] {
  display: none !important;
}

/* Message de retour : succes / erreur avec icone, sur les jetons du site. */
.prayer-msg {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0;
  border-radius: var(--radius-sm);
  padding: .85rem 1.05rem;
  color: var(--ink);
  animation: tv2-msg-in .25s ease both;
}
.prayer-msg::before {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}
.prayer-msg.is-ok {
  background: color-mix(in srgb, var(--cypress) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cypress) 45%, var(--line));
}
.prayer-msg.is-ok::before {
  content: "✓";
  background: var(--cypress);
  color: var(--paper);
}
.prayer-msg.is-err {
  background: color-mix(in srgb, var(--burgundy) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--burgundy) 45%, var(--line));
}
.prayer-msg.is-err::before {
  content: "!";
  background: var(--burgundy);
  color: var(--paper);
}

@media (min-width: 760px) {
  .prayer-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .prayer-form .form-group:has(select),
  .prayer-form .form-group:has(textarea),
  .prayer-form .form-check,
  .prayer-form .prayer-disclaimer,
  .prayer-form .prayer-form__actions,
  .prayer-form .prayer-form__hint,
  .prayer-form .prayer-msg {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .contact-direct {
    align-items: stretch;
  }

  .contact-direct .btn,
  .prayer-form__actions .btn {
    width: 100%;
  }

  .prayer-form {
    padding: clamp(1rem, 5vw, 1.25rem);
    gap: .9rem;
  }

  .form-check {
    align-items: flex-start;
    padding: .8rem;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="number"],
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }

  .form-group input[type="number"] {
    max-width: 100%;
  }
}

@keyframes tv2-msg-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prayer-msg { animation: none; }
}

/* ---- 16.13 Menu déroulant premium (desktop) ------------------------------
   Les panneaux du menu groupé deviennent de vrais panneaux : verre dépoli,
   filet d'or, entrée en fondu + élévation, items révélés en cascade,
   chevron qui pivote. Le tiroir mobile (<1400 px) n'est pas touché. */
@media (min-width: 1400px) {
  .mainnav__summary {
    position: relative;
    transition: background-color .2s ease, color .2s ease;
  }
  .mainnav__summary::after {
    transition: transform .22s cubic-bezier(.2, .7, .3, 1.2), opacity .2s ease;
  }
  .mainnav__group:hover .mainnav__summary::after,
  .mainnav__group:focus-within .mainnav__summary::after {
    transform: translateY(.14rem) rotate(-135deg);
    opacity: 1;
  }
  .mainnav__group.is-current .mainnav__summary::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.14rem;
    width: .3rem;
    height: .3rem;
    border-radius: 999px;
    background: var(--gold);
    transform: translateX(-50%);
  }
  .mainnav__sublist {
    min-width: 16.5rem;
    padding: .6rem;
    border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    box-shadow: var(--shadow-lg);
    transform: translateY(.5rem) scale(.985);
    transform-origin: top right;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility .2s ease;
    overflow: hidden;
  }
  .mainnav__sublist::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .85;
  }
  .mainnav__group:hover .mainnav__sublist,
  .mainnav__group:focus-within .mainnav__sublist {
    transform: none;
  }
  .mainnav__sublist li {
    opacity: 0;
    transform: translateY(.3rem);
    transition: opacity .24s ease, transform .24s ease;
  }
  .mainnav__group:hover .mainnav__sublist li,
  .mainnav__group:focus-within .mainnav__sublist li {
    opacity: 1;
    transform: none;
  }
  .mainnav__sublist li:nth-child(2) { transition-delay: .03s; }
  .mainnav__sublist li:nth-child(3) { transition-delay: .06s; }
  .mainnav__sublist li:nth-child(4) { transition-delay: .09s; }
  .mainnav__sublist li:nth-child(5) { transition-delay: .12s; }
  .mainnav__sublist li:nth-child(6) { transition-delay: .15s; }
  .mainnav__sublist li:nth-child(n+7) { transition-delay: .18s; }
  .mainnav__sublist a {
    position: relative;
    padding-left: .85rem;
    transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
  }
  .mainnav__sublist a::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: 50%;
    width: .18rem;
    height: 0;
    border-radius: 999px;
    background: var(--gold);
    transform: translateY(-50%);
    transition: height .18s ease;
  }
  .mainnav__sublist a:hover,
  .mainnav__sublist a:focus-visible {
    background: color-mix(in srgb, var(--gold) 11%, transparent);
    padding-left: 1.05rem;
  }
  .mainnav__sublist a:hover::before,
  .mainnav__sublist a:focus-visible::before {
    height: 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mainnav__sublist,
  .mainnav__sublist li,
  .mainnav__sublist a,
  .mainnav__summary::after {
    transition: none !important;
  }
}

/* ---- 16.14 Barre d'onglets mobile (navigation de poche) -----------------
   Sous 900 px : Acasă · Calendar · Sfinți · Hartă · Caută, toujours sous le
   pouce, en verre dépoli au-dessus du contenu (construite par tabbar.js). */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: .3rem max(.45rem, env(safe-area-inset-right))
           calc(.34rem + env(safe-area-inset-bottom))
           max(.45rem, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--panel) 10%, transparent);
}
.tabbar__item {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 3.15rem;
  padding: .3rem .15rem;
  border-radius: 12px;
  color: var(--ink-soft);
  font: 600 .67rem/1 var(--font-body);
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .1s ease;
}
.tabbar__item:active { transform: scale(.94); }
.tabbar__icon { width: 1.35rem; height: 1.35rem; }
.tabbar__item.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.tabbar__item.is-active .tabbar__icon { color: var(--gold); }
@media (max-width: 899px) {
  .tabbar { display: grid; }
  body.has-tabbar { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
  body.has-tabbar { --candle-safe-bottom: calc(4.65rem + env(safe-area-inset-bottom)); }
  /* le cadre de la page ne doit pas passer sous la barre */
  body.has-tabbar .site-footer { padding-bottom: 1.2rem; }
}
body.prayer-mode-open .tabbar { display: none; }
@media print {
  .tabbar { display: none !important; }
}

/* ---- 16.15 « Sfântul zilei » dans le widget quotidien -------------------- */
.daily-widget__saint {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.45;
}
.daily-widget__saint-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: color .16s ease, border-color .16s ease;
}
.daily-widget__saint-link .arrow {
  display: inline-block;
  transition: transform .16s ease;
}
.daily-widget__saint-link:hover,
.daily-widget__saint-link:focus-visible {
  color: color-mix(in srgb, var(--gold) 60%, var(--ink));
  border-bottom-color: var(--gold);
}
.daily-widget__saint-link:hover .arrow { transform: translateX(3px); }
.daily-widget__saint-cross { color: var(--gold); }

/* ---- 16.16 Mod de rugăciune (mode prière plein écran) --------------------
   Fonction signature : lecture d'un acatiste condac par condac, sur fond
   « veilleuse » anthracite (jetons --panel/--panel-ink → identique dans les
   deux thèmes), progression discrète, écran maintenu allumé (prayer-mode.js). */
.prayer-cta {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  margin: .9rem 0 1.15rem;
  padding: .85rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--gold) 10%, var(--surface)),
              var(--surface) 62%);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prayer-cta:hover,
.prayer-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
}
.prayer-cta__flame {
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
  color: var(--gold);
}
.prayer-cta b {
  display: block;
  font-size: 1.03rem;
  font-family: var(--font-display);
  letter-spacing: .01em;
}
.prayer-cta small {
  display: block;
  margin-top: .1rem;
  color: var(--ink-soft);
  font-size: .85rem;
}
@media print {
  .prayer-cta { display: none; }
}

.prayer-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 85% at 50% -12%,
      color-mix(in srgb, var(--gold) 10%, var(--panel)),
      var(--panel) 58%);
  color: var(--panel-ink);
  animation: prayer-in .3s ease;
}
@keyframes prayer-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.prayer-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(.65rem, env(safe-area-inset-top)) 1rem .55rem;
}
.prayer-overlay__who {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  color: color-mix(in srgb, var(--panel-ink) 80%, transparent);
}
.prayer-overlay__who .prayer-cta__flame {
  width: 1.25rem;
  height: 1.25rem;
  animation: prayer-flame 3.2s ease-in-out infinite;
}
@keyframes prayer-flame {
  0%, 100% { transform: scale(1); opacity: .95; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.prayer-overlay__name {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prayer-overlay__close {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--panel-ink) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.prayer-overlay__close:hover,
.prayer-overlay__close:focus-visible {
  background: color-mix(in srgb, var(--panel-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--panel-ink) 45%, transparent);
}
.prayer-overlay__progress {
  height: 2px;
  margin: 0 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-ink) 14%, transparent);
  overflow: hidden;
}
.prayer-overlay__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width .3s ease;
}
.prayer-overlay__scroll {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.2rem 2.2rem;
}
.prayer-overlay__body {
  max-width: 44rem;
  margin: 0 auto;
  font-family: var(--font-reading);
  font-size: clamp(1.12rem, 1rem + .55vw, 1.32rem);
  line-height: 1.85;
}
.prayer-overlay__title {
  margin: 0 0 1.05rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem);
  letter-spacing: .02em;
  color: var(--gold-soft);
}
.prayer-overlay__body p { color: color-mix(in srgb, var(--panel-ink) 96%, transparent); }
.prayer-overlay__body .ak-refrains {
  margin: 1rem 0;
  padding-left: 1.1rem;
}
.prayer-overlay__body .ak-refrains li { margin: .4rem 0; }
.prayer-overlay__body .ak-note {
  color: color-mix(in srgb, var(--panel-ink) 62%, transparent);
  font-style: italic;
}
.prayer-overlay__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .8rem;
  padding: .7rem max(1rem, env(safe-area-inset-right))
           calc(.85rem + env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-left));
  border-top: 1px solid color-mix(in srgb, var(--panel-ink) 12%, transparent);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.prayer-overlay__btn {
  min-height: 2.95rem;
  max-width: 100%;
  padding: .62rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--panel-ink) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-ink) 6%, transparent);
  color: var(--panel-ink);
  font: 600 .9rem var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.prayer-overlay__btn--prev { justify-self: start; }
.prayer-overlay__btn--next {
  justify-self: end;
  border-color: color-mix(in srgb, var(--gold) 46%, transparent);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
}
.prayer-overlay__btn:hover:not(:disabled),
.prayer-overlay__btn:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--panel-ink) 14%, transparent);
}
.prayer-overlay__btn--next:hover:not(:disabled),
.prayer-overlay__btn--next:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--gold) 26%, transparent);
}
.prayer-overlay__btn:disabled {
  opacity: .4;
  cursor: default;
}
.prayer-overlay__count {
  font-size: .78rem;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--panel-ink) 60%, transparent);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .prayer-overlay__btn { max-width: 36vw; padding-inline: .8rem; font-size: .84rem; }
  .prayer-overlay__scroll { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .prayer-overlay,
  .prayer-overlay__progress i,
  .prayer-cta,
  .tabbar__item,
  .daily-widget__saint-link .arrow {
    animation: none !important;
    transition: none !important;
  }
  .prayer-overlay__who .prayer-cta__flame { animation: none !important; }
}

/* ---- 16.17 Navigation guidée + Fil du jour -------------------------------
   La barre du haut devient un vrai point d'orientation : groupes à deux
   niveaux, tiroir cohérent jusqu'au breakpoint desktop réel et fil local
   (daily-thread.js) pour reprendre une lecture ou préparer une question. */
.day-thread-panel[hidden] {
  display: none !important;
}

.mainnav__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .42rem;
  row-gap: .04rem;
  text-align: left;
}
.mainnav__summary-label,
.mainnav__summary-desc {
  grid-column: 1;
  min-width: 0;
}
.mainnav__summary-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mainnav__summary-desc {
  display: block;
  max-width: 18ch;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.12;
  white-space: normal;
}
.mainnav__summary::after {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.day-thread-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .46rem;
  min-width: 0;
  min-height: 2.45rem;
  padding: .34rem .72rem;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line));
  border-radius: 999px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--gold) 12%, var(--surface)),
              var(--surface) 70%);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font: 800 .78rem var(--font-body);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.day-thread-toggle:hover,
.day-thread-toggle:focus-visible,
.day-thread-toggle[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
  box-shadow: var(--shadow);
}
.day-thread-toggle__icon {
  display: inline-flex;
  width: 1.08rem;
  height: 1.08rem;
  flex: none;
  color: var(--gold);
}
.day-thread-toggle__icon svg,
.day-thread__close-icon svg {
  width: 100%;
  height: 100%;
}
.day-thread-toggle__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-thread-panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 1rem;
  z-index: 1200;
  width: min(27rem, calc(100% - 2rem));
  max-height: calc(100vh - 5.75rem);
  max-height: calc(100dvh - 5.75rem);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.day-thread__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .7rem;
}
.day-thread__eyebrow {
  margin: 0 0 .12rem;
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.25;
}
.day-thread__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.05;
}
.day-thread__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.day-thread__close:hover,
.day-thread__close:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 46%, var(--line));
}
.day-thread__close-icon {
  display: inline-flex;
  width: .95rem;
  height: .95rem;
}
.day-thread__card {
  display: grid;
  gap: .15rem;
  margin-top: .55rem;
  padding: .78rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 82%, var(--band));
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.day-thread__card:hover,
.day-thread__card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}
.day-thread__kicker {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.day-thread__card-title {
  overflow-wrap: anywhere;
  font-size: .96rem;
  line-height: 1.25;
}
.day-thread__card-body {
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.35;
}
.day-thread__note {
  display: grid;
  gap: .42rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.day-thread__label {
  color: var(--ink);
  font-weight: 800;
  font-size: .88rem;
}
.day-thread__field {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  padding: .68rem .72rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 500 .92rem var(--font-body);
  line-height: 1.45;
}
.day-thread__field:focus {
  outline: 2px solid color-mix(in srgb, var(--gold) 38%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line));
}
.day-thread__field:disabled {
  opacity: .68;
  cursor: not-allowed;
}
.day-thread__status {
  color: var(--ink-soft);
  font-size: .76rem;
}
.day-thread__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.day-thread__mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: .35rem .68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 800 .78rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.day-thread__mini:hover,
.day-thread__mini:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
}
.day-thread__mini:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.day-thread__mini--link {
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
}

@media (max-width: 1799px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  .site-header .day-thread-toggle {
    grid-column: 2 !important;
    justify-self: end !important;
  }
  .site-header .nav-toggle {
    grid-column: 3 !important;
  }
  .site-header .mainnav__list--grouped {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .62rem !important;
  }
  .site-header .mainnav__group {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background: color-mix(in srgb, var(--surface) 84%, var(--band)) !important;
    padding: .2rem .7rem .58rem !important;
  }
  .site-header .mainnav__summary {
    width: 100% !important;
    min-height: 3rem !important;
    padding: .42rem .08rem !important;
    color: var(--ink) !important;
    background: transparent !important;
    cursor: pointer !important;
  }
  .site-header .mainnav__summary-desc {
    max-width: none !important;
    font-size: .76rem !important;
  }
  .site-header .mainnav__sublist {
    position: static !important;
    min-width: 0 !important;
    display: none !important;
    gap: .1rem !important;
    padding: .08rem 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .site-header .mainnav__group.is-open .mainnav__sublist {
    display: grid !important;
  }
  .site-header .mainnav__sublist a {
    min-height: 2.7rem !important;
    padding: .56rem .1rem .56rem .78rem !important;
    border-radius: 8px !important;
    font-size: .98rem !important;
  }
  .day-thread-panel {
    left: clamp(.75rem, 3vw, 1.25rem);
    right: clamp(.75rem, 3vw, 1.25rem);
    width: auto;
  }
}

@media (min-width: 1800px) {
  .site-header .day-thread-toggle {
    flex: 0 0 auto !important;
  }
  .site-header .mainnav__summary {
    min-height: 2.6rem !important;
    max-width: 11.2rem !important;
    padding: .38rem .58rem !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
  }
  .site-header .mainnav__summary-desc {
    max-width: 14ch !important;
    font-size: .62rem !important;
  }
  .site-header .mainnav__group:hover .mainnav__summary,
  .site-header .mainnav__group:focus-within .mainnav__summary,
  .site-header .mainnav__group.is-current .mainnav__summary {
    border-color: color-mix(in srgb, var(--gold) 30%, var(--line)) !important;
  }
}

@media (max-width: 720px) {
  .day-thread-toggle {
    width: 2.55rem;
    height: 2.55rem;
    padding: 0;
  }
  .day-thread-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .day-thread-panel {
    padding: .78rem;
  }
  .day-thread__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .day-thread__mini {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-thread-toggle,
  .day-thread__card,
  .day-thread__close,
  .day-thread__mini,
  .mainnav__summary,
  .mainnav__summary::after {
    transition: none !important;
  }
}

/* ==========================================================================
   16.17b Calendrier : guide humain du jeûne
   ========================================================================== */

.cal-fast-guide {
  display: grid;
  gap: 1rem;
  align-items: start;
  margin: 0 0 1.6rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 58%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, var(--gold-soft));
  box-shadow: var(--shadow-sm);
}

.cal-fast-guide__body {
  min-width: 0;
}

.cal-fast-guide h2 {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1rem + .45vw, 1.42rem);
  line-height: 1.18;
  color: var(--ink);
}

.cal-fast-guide p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.58;
}

.cal-fast-guide ul {
  display: grid;
  gap: .42rem;
  margin: .8rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.cal-fast-guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}

.cal-fast-guide__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  max-width: 100%;
  padding: .55rem .9rem;
  border: 1px solid color-mix(in srgb, var(--gold) 56%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.cal-fast-guide__actions a:first-child {
  background: var(--gold);
  color: #1f170b;
}

.cal-fast-guide__actions a:hover,
.cal-fast-guide__actions a:focus-visible {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: #1f170b;
}

[data-theme="dark"] .cal-fast-guide {
  background: color-mix(in srgb, var(--surface) 90%, var(--gold-soft));
  border-color: color-mix(in srgb, var(--gold-soft) 42%, var(--line));
}

@media (min-width: 780px) {
  .cal-fast-guide {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    padding: 1.15rem 1.2rem;
  }

  .cal-fast-guide__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .cal-fast-guide {
    padding: .95rem;
  }

  .cal-fast-guide__actions a {
    width: 100%;
  }
}

/* ==========================================================================
   16.18 Église orthodoxe interactive
   ========================================================================== */

.church-page {
  container-type: inline-size;
}

.church-page .answer-lead {
  max-width: 66ch;
}

.church-tour {
  margin: clamp(1.4rem, 3vw, 2.6rem) 0;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--gold) 9%, var(--surface)),
      color-mix(in srgb, var(--band) 76%, var(--surface)));
  box-shadow: var(--shadow-sm);
}

.church-tour__intro {
  display: grid;
  gap: .25rem;
  max-width: 64ch;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.church-tour__intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.05;
}

.church-tour__intro p {
  margin: 0;
  color: var(--ink-soft);
}

.church-tour__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
  gap: clamp(1rem, 2.4vw, 1.65rem);
  align-items: start;
}

.church-tour__map {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 1000 / 620;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line));
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 11%,
      color-mix(in srgb, var(--gold) 20%, transparent),
      transparent 32%),
    color-mix(in srgb, var(--surface) 90%, var(--band));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent);
  overflow: visible;
}

.church-plan {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.church-plan__shadow {
  fill: color-mix(in srgb, var(--ink) 10%, transparent);
}

.church-plan__wall {
  fill: color-mix(in srgb, var(--surface) 82%, var(--band));
  stroke: color-mix(in srgb, var(--gold) 38%, var(--line));
  stroke-width: 10;
}

.church-plan__apse,
.church-plan__altar {
  fill: color-mix(in srgb, var(--gold) 14%, var(--surface));
  stroke: color-mix(in srgb, var(--gold) 38%, var(--line));
  stroke-width: 4;
}

.church-plan__nave {
  fill: color-mix(in srgb, var(--band) 82%, var(--surface));
  stroke: var(--line);
  stroke-width: 4;
}

.church-plan__iconostasis {
  fill: color-mix(in srgb, var(--gold) 34%, var(--surface));
  stroke: color-mix(in srgb, var(--gold) 56%, var(--line));
  stroke-width: 4;
}

.church-plan__doors {
  fill: color-mix(in srgb, var(--surface) 74%, var(--gold));
  stroke: color-mix(in srgb, var(--gold) 68%, var(--line));
  stroke-width: 3;
}

.church-plan__aisle,
.church-plan__ambo,
.church-plan__narthex,
.church-plan__choir,
.church-plan__bishop-seat,
.church-plan__baptistery {
  fill: color-mix(in srgb, var(--surface) 78%, var(--band));
  stroke: color-mix(in srgb, var(--ink-soft) 26%, var(--line));
  stroke-width: 4;
}

.church-plan__candle,
.church-plan__icon,
.church-plan__table {
  fill: color-mix(in srgb, var(--gold) 26%, var(--surface));
  stroke: color-mix(in srgb, var(--gold) 55%, var(--line));
  stroke-width: 3;
}

.church-plan__incense {
  fill: none;
  stroke: color-mix(in srgb, var(--ink-soft) 42%, transparent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 10 13;
}

.church-pin {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 4.2cqi, 2.65rem);
  height: clamp(2rem, 4.2cqi, 2.65rem);
  min-width: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--gold) 52%, var(--surface));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, var(--gold));
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.church-pin:hover,
.church-pin:focus-visible,
.church-pin.is-active {
  z-index: 4;
  transform: translate(-50%, -50%) scale(1.08);
  border-color: color-mix(in srgb, var(--gold) 78%, var(--line));
  background: color-mix(in srgb, var(--gold) 34%, var(--surface));
  box-shadow: var(--shadow-lg);
}

.church-pin:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 34%, transparent);
  outline-offset: 3px;
}

.church-pin__num {
  font-size: clamp(.78rem, 1.7cqi, 1rem);
  font-weight: 900;
  line-height: 1;
}

.church-pin__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .45rem);
  max-width: min(13rem, 38cqi);
  padding: .34rem .52rem;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-size: clamp(.7rem, 1.6cqi, .82rem);
  font-weight: 800;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%) translateY(.25rem);
  transition: opacity .18s ease, transform .18s ease;
  white-space: normal;
}

.church-pin:hover .church-pin__label,
.church-pin:focus-visible .church-pin__label,
.church-pin.is-active .church-pin__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.church-pin--narthex { left: 21%; top: 38%; }
.church-pin--candles { left: 26%; top: 36%; }
.church-pin--icons { left: 30%; top: 50%; }
.church-pin--nave { left: 50%; top: 73%; }
.church-pin--choir { left: 77%; top: 68%; }
.church-pin--ambo { left: 50%; top: 65%; }
.church-pin--iconostasis { left: 41%; top: 51%; }
.church-pin--royal-doors { left: 58%; top: 51%; }
.church-pin--altar { left: 50%; top: 31%; }
.church-pin--incense { left: 66%; top: 65%; }
.church-pin--baptistery { left: 21%; top: 62%; }
.church-pin--bishop-seat { left: 85%; top: 43%; }

.church-tour__panel {
  min-width: 0;
}

.church-panel {
  min-height: 100%;
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, var(--band));
  box-shadow: var(--shadow-sm);
}

.church-panel[hidden] {
  display: none;
}

.church-panel__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 24%, var(--surface));
  color: var(--ink);
  font-weight: 900;
}

.church-panel h2 {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  line-height: 1.05;
}

.church-panel p,
.church-panel dd {
  color: var(--ink-soft);
  line-height: 1.58;
}

.church-panel p {
  margin: 0 0 1rem;
}

.church-panel__practical {
  display: grid;
  gap: .72rem;
  margin: 0;
}

.church-panel__practical div {
  padding: .72rem .78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 76%, var(--band));
}

.church-panel dt {
  margin-bottom: .18rem;
  color: var(--ink);
  font-weight: 900;
}

.church-panel dd {
  margin: 0;
}

.church-panel__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1rem;
  color: var(--gold);
  font-weight: 900;
  text-decoration: none;
}

.church-panel__link:hover,
.church-panel__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.church-next {
  margin-top: clamp(1.2rem, 2.6vw, 2rem);
}

.church-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .85rem;
}

@media (max-width: 900px) {
  .church-tour__stage {
    grid-template-columns: 1fr;
  }
  .church-tour__panel {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .church-tour {
    padding: .82rem;
  }
  .church-pin {
    width: 2rem;
    height: 2rem;
  }
  .church-pin__label {
    width: max-content;
    max-width: 8rem;
    font-size: .68rem;
  }
  .church-panel {
    padding: .92rem;
  }
  .church-next__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .church-next__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .church-pin,
  .church-pin__label {
    transition: none !important;
  }
}

/* ==========================================================================
   16.18b Recettes : options rapides du placard
   ========================================================================== */

.recipe-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: -1rem 0 1.7rem;
  padding: .72rem .82rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--band));
}

.recipe-options__label {
  margin-right: .15rem;
  color: var(--ink);
  font-weight: 900;
}

.recipe-option {
  min-height: 2.25rem;
  padding: .42rem .72rem;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.recipe-option:hover,
.recipe-option:focus-visible,
.recipe-option.is-active {
  border-color: color-mix(in srgb, var(--gold) 64%, var(--line));
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  color: var(--ink);
}

.recipe-option:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.recipe-option.is-active {
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .recipe-options {
    align-items: stretch;
  }
  .recipe-options__label {
    width: 100%;
  }
  .recipe-option {
    flex: 1 1 calc(50% - .55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-option {
    transition: none !important;
  }
}

/* ==========================================================================
   16.19 Compagnon local Drumul meu
   ========================================================================== */

.companion-page {
  container-type: inline-size;
}

.companion-page .answer-lead {
  max-width: 68ch;
}

.companion-kicker {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0 .5rem;
  color: color-mix(in srgb, var(--gold) 74%, var(--ink));
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.companion-resume {
  margin-top: clamp(1rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(1.2rem, 2.8vw, 2.2rem);
}

.companion-resume__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(.9rem, 2.2vw, 1.4rem);
  align-items: center;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 11%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 88%, var(--band));
  box-shadow: var(--shadow-sm);
}

.companion-resume__body {
  min-width: 0;
}

.companion-resume h2,
.companion-privacy h2,
.companion-dashboard h2,
.companion-modules h2 {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  line-height: 1.08;
}

.companion-resume p,
.companion-privacy p,
.companion-dashboard p,
.companion-module p,
.companion-empty,
.companion-list__meta {
  color: var(--ink-soft);
  line-height: 1.58;
}

.companion-resume__meta {
  margin: .65rem 0 0;
  font-size: .94rem;
  font-weight: 800;
}

.companion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin: .9rem 0 0;
}

.companion-privacy,
.companion-dashboard {
  margin: clamp(1.2rem, 2.8vw, 2rem) 0;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 86%, var(--band));
}

.companion-dashboard {
  display: grid;
  gap: 1rem;
}

.companion-list {
  display: grid;
  gap: .65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.companion-list__item {
  display: grid;
  gap: .25rem;
  padding: .78rem .85rem;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 78%, var(--band));
}

.companion-list__link {
  min-width: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.companion-list__link:hover,
.companion-list__link:focus-visible {
  color: color-mix(in srgb, var(--gold) 70%, var(--ink));
  text-decoration: underline;
  text-underline-offset: .18em;
}

.companion-empty {
  margin: 0;
  padding: .8rem .85rem;
  border: 1px dashed color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 74%, var(--band));
}

.companion-status {
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 800;
}

.companion-danger {
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
}

.companion-modules {
  display: grid;
  gap: .8rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0;
}

.companion-modules > h2 {
  margin-bottom: .1rem;
}

.companion-module {
  display: grid;
  gap: .32rem;
  padding: clamp(.9rem, 2vw, 1.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 82%, var(--band));
}

.companion-module span {
  justify-self: start;
  padding: .18rem .5rem;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--gold) 72%, var(--ink));
  font-size: .75rem;
  font-weight: 900;
}

.companion-module h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
}

.companion-module p {
  margin: 0;
}

.companion-module.is-ready {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}

[data-companion-page] [hidden],
.companion-resume[hidden] {
  display: none !important;
}

@media (min-width: 760px) {
  .companion-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .companion-modules > h2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .companion-resume__card {
    grid-template-columns: 1fr;
  }
  .companion-actions,
  .companion-resume__card .companion-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .companion-actions .btn {
    width: 100%;
  }
}

/* ---- 16.20 Drumul meu — carnet de questions -----------------------------
   M2 garde les questions localement et prépare une feuille imprimable pour
   une vraie discussion avec un prêtre. */
.companion-question-cta {
  display: grid;
  gap: .48rem;
  margin: clamp(1.2rem, 2.6vw, 1.8rem) 0;
  padding: clamp(.95rem, 2.2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
}

.companion-question-cta__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.12;
}

.companion-question-cta__body {
  max-width: 68ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.58;
}

.companion-modal[hidden] {
  display: none !important;
}

.companion-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--ink) 36%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.companion-modal__panel {
  position: relative;
  width: min(35rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: clamp(1rem, 2.6vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.companion-modal__close {
  position: absolute;
  top: .72rem;
  right: .72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.companion-modal__close:hover,
.companion-modal__close:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 46%, var(--line));
}

.companion-modal__title {
  margin: 0 2.4rem .5rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.08;
}

.companion-modal__body,
.companion-question-ref,
.companion-print-sheet__intro {
  color: var(--ink-soft);
  line-height: 1.58;
}

.companion-modal__label {
  display: block;
  margin: .9rem 0 .35rem;
  color: var(--ink);
  font-weight: 900;
}

.companion-question-textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 90%, var(--band));
  color: var(--ink);
  font: 500 1rem var(--font-body);
  line-height: 1.55;
}

.companion-question-textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--gold) 58%, transparent);
  outline-offset: 2px;
}

.companion-question-ref {
  margin: .65rem 0 0;
  font-size: .92rem;
}

.companion-question-ref__label {
  font-weight: 900;
  color: var(--ink);
}

.companion-question-ref__value {
  overflow-wrap: anywhere;
}

.companion-question-list {
  display: grid;
  gap: .72rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.companion-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem .8rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.companion-question__text {
  grid-column: 1;
  margin: 0;
  color: var(--ink);
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.companion-question__meta {
  grid-column: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.45;
}

.companion-question__ref {
  color: color-mix(in srgb, var(--gold) 72%, var(--ink));
  font-weight: 800;
  overflow-wrap: anywhere;
}

.companion-question__actions {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  gap: .35rem;
  align-self: start;
  margin: 0;
}

.companion-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--band));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.companion-icon-btn:hover:not(:disabled),
.companion-icon-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
}

.companion-icon-btn:disabled {
  opacity: .38;
  cursor: default;
}

.companion-icon-btn--danger {
  color: color-mix(in srgb, var(--ink) 80%, var(--gold));
}

.companion-print-sheet {
  display: none;
}

@media (max-width: 640px) {
  .companion-question {
    grid-template-columns: 1fr;
  }
  .companion-question__actions {
    grid-column: 1;
    grid-row: auto;
  }
}

@media print {
  body.companion-printing > :not(.companion-print-sheet) {
    display: none !important;
  }
  body.companion-printing .companion-print-sheet {
    display: block !important;
    padding: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: var(--font-reading);
  }
  .companion-print-sheet h1 {
    margin: 0 0 .4rem;
    font-size: 1.45rem;
  }
  .companion-print-sheet ol {
    display: grid;
    gap: .85rem;
    padding-left: 1.25rem;
  }
  .companion-print-sheet__item {
    break-inside: avoid;
  }
  .companion-print-sheet__text,
  .companion-print-sheet__ref {
    margin: .18rem 0;
  }
  .companion-print-sheet__ref {
    color: var(--ink-soft);
    font-size: .9rem;
  }
}

/* ---- 16.21 Drumul meu — pomelnic privé ----------------------------------
   M3 garde les prénoms localement et les affiche sous le cierge allumé. */
.companion-dashboard--pomelnic {
  border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
}

.companion-theology-note,
.companion-pomelnic__intro,
.companion-pomelnic__help {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.58;
}

.companion-theology-note {
  padding: .78rem .85rem;
  border: 1px dashed color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 76%, var(--band));
}

.companion-pomelnic {
  display: grid;
  gap: .8rem;
}

.companion-pomelnic__grid {
  display: grid;
  gap: .85rem;
}

.companion-pomelnic__field {
  min-width: 0;
}

.companion-pomelnic__textarea {
  min-height: 7.5rem;
}

.companion-pomelnic__preview {
  display: grid;
  gap: .7rem;
  margin-top: .15rem;
}

.companion-pomelnic__group {
  display: grid;
  gap: .45rem;
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.companion-pomelnic__group h3 {
  margin: 0;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.2;
}

.companion-pomelnic__names,
.candle-pomelnic__names {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.companion-pomelnic__names li {
  max-width: 100%;
  padding: .26rem .58rem;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
  color: var(--ink);
  font-size: .92rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.candle-pomelnic[hidden] {
  display: none !important;
}

.candle-pomelnic {
  display: grid;
  gap: .56rem;
  max-width: 18rem;
  margin: .85rem auto 0;
  padding: .72rem .78rem;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 38%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--night-2) 84%, transparent);
  text-align: left;
}

.candle-pop .candle-pomelnic p,
.candle-pop .candle-pomelnic ul {
  max-width: none;
  margin: 0;
}

.candle-pomelnic__title {
  color: var(--night-ink);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.candle-pomelnic__group {
  display: grid;
  gap: .32rem;
}

.candle-pomelnic__label {
  color: color-mix(in srgb, var(--gold-soft) 82%, var(--night-ink));
  font-size: .78rem;
  font-weight: 900;
}

.candle-pomelnic__names li {
  max-width: 100%;
  padding: .2rem .48rem;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 28%, transparent);
  border-radius: 999px;
  color: var(--night-ink);
  background: color-mix(in srgb, var(--night) 78%, transparent);
  font-size: .78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.candle-pomelnic__manage {
  justify-self: start;
  color: var(--gold-soft);
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold-soft) 60%, transparent);
}

.candle-pomelnic__manage:hover,
.candle-pomelnic__manage:focus-visible {
  color: var(--night-ink);
}

@media (min-width: 760px) {
  .companion-pomelnic__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .candle-pomelnic {
    max-height: 11rem;
    overflow: auto;
  }
}

/* ---- 16.22 Drumul meu — rythme liturgique -------------------------------
   M4 affiche un seul repère proche du calendrier local, sans notification. */
.companion-dashboard--rhythm {
  border-color: color-mix(in srgb, var(--gold) 26%, var(--line));
}

.companion-rhythm {
  display: grid;
  gap: .95rem;
  align-items: center;
  padding: .95rem;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--band));
}

.companion-rhythm--home {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.companion-rhythm__body {
  min-width: 0;
}

.companion-rhythm h2 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1rem + .42vw, 1.45rem);
  line-height: 1.18;
  color: var(--ink);
}

.companion-rhythm p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.companion-rhythm__intro {
  margin-top: .35rem !important;
  font-size: .92rem;
}

.companion-rhythm__actions {
  margin: 0;
}

@media (min-width: 780px) {
  .companion-rhythm {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .companion-rhythm__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .companion-rhythm {
    padding: .85rem;
  }

  .companion-rhythm__actions .btn {
    width: 100%;
  }
}

/* ---- 16.23 Drumul meu — favoris privés et export ------------------------
   M5 garde des pages choisies explicitement et prépare un export local. */
.companion-save-cta {
  display: grid;
  gap: .48rem;
  margin: clamp(1.2rem, 2.6vw, 1.8rem) 0;
  padding: clamp(.95rem, 2.2vw, 1.2rem);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--band));
}

.companion-save-cta__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + .32vw, 1.32rem);
}

.companion-save-cta__body {
  max-width: 68ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.58;
}

.companion-dashboard--saved {
  border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
}

.companion-saved-list {
  display: grid;
  gap: .72rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.companion-saved {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem .9rem;
  align-items: center;
  padding: .82rem .9rem;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, var(--band));
}

.companion-saved__body {
  min-width: 0;
}

.companion-saved__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
  margin: 0;
}

@media (max-width: 680px) {
  .companion-saved {
    grid-template-columns: 1fr;
  }

  .companion-saved__actions {
    justify-content: stretch;
  }

  .companion-saved__actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}