:root{
  --ground:#efeee9;
  --surface:#f8f6f2;
  --surface-2:#ffffff;
  --ink:#211c17;
  --ink-soft:#5b544c;
  --line:#d9d3c7;
  --violet:#6a2c5a;
  --violet-soft:#f1e6ee;
  --rubric:#a12c22;
  --gold:#8f6d2a;
  --shadow: 0 1px 2px rgba(33,28,23,.06), 0 10px 30px -12px rgba(33,28,23,.25);
  --font-scale: 1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#171310;
    --surface:#1f1a15;
    --surface-2:#241e18;
    --ink:#ece5d8;
    --ink-soft:#b9ac99;
    --line:#3a3126;
    --violet:#c992bf;
    --violet-soft:#2c2030;
    --rubric:#e2776a;
    --gold:#cca961;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#171310;
  --surface:#1f1a15;
  --surface-2:#241e18;
  --ink:#ece5d8;
  --ink-soft:#b9ac99;
  --line:#3a3126;
  --violet:#c992bf;
  --violet-soft:#2c2030;
  --rubric:#e2776a;
  --gold:#cca961;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"EB Garamond", Georgia, serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}

/* ---- top app header ---- */
.app-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:14px 12px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.app-header-center{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px;
  min-width:0;
}
.app-date{
  font-family:"Archivo",sans-serif; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.app-feast{
  font-family:"Cormorant Garamond",serif; font-weight:600; font-size:1.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.icon-btn{
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  width:38px; height:38px; border-radius:50%; flex:none;
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ---- bottom tab bar ---- */
.tabbar{
  position:sticky; bottom:0; z-index:5;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  gap:4px;
}
.tab{
  flex:1; border:none; background:transparent; color:var(--ink-soft);
  font-family:"Archivo",sans-serif; font-weight:600; font-size:.78rem;
  padding:.7em .4em; border-radius:10px; cursor:pointer;
}
.tab.active{ background:var(--violet-soft); color:var(--violet); }

/* Le document lui-même défile (pas de conteneur interne séparé) : c'est ce qui
   permet à l'en-tête et à la barre d'onglets de rester "sticky", et à la reprise
   de position (window.scrollY) de fonctionner. */
main{ max-width:720px; width:100%; margin:0 auto; padding:20px 16px 40px; position:relative; }


/* ---- Accueil ---- */
.accueil{ display:flex; flex-direction:column; gap:22px; }
.accueil h1{
  font-family:"Cormorant Garamond",serif; font-weight:600; font-size:clamp(1.6rem,5vw,2.2rem);
  margin:0; text-wrap:balance;
}
.rank-row{
  display:flex; align-items:center; gap:8px;
  font-family:"Archivo",sans-serif; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.swatch{width:10px;height:10px;border-radius:50%;background:var(--violet); flex:none;}
.incipit{
  font-style:italic; color:var(--ink-soft); font-size:calc(1rem * var(--font-scale));
  line-height:1.55; border-left:2px solid var(--violet); padding-left:14px;
}
.btn{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:.92rem;
  text-align:center; padding:.9em 1em; border-radius:12px; border:1px solid transparent;
  cursor:pointer; width:100%;
}
.btn-primary{background:var(--violet); color:#fbf3f8;}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}

/* ---- Suivre la messe ---- */
.lang-toggle{
  display:flex; gap:4px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:3px;
  font-family:"Archivo",sans-serif; font-size:.7rem; letter-spacing:.05em;
  width:fit-content; margin:0 auto 18px;
}
.lang-toggle button{
  border:none; background:transparent; color:var(--ink-soft);
  padding:.45em .95em; border-radius:999px; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:inherit;
}
.lang-toggle button.active{background:var(--violet); color:#fbf3f8;}

.font-controls{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:18px;
}
.font-controls button{
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-family:"Archivo",sans-serif;
}
.font-controls span{ font-family:"Archivo",sans-serif; font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}

.messe-flow{ display:flex; flex-direction:column; gap:26px; }
.bloc{ display:flex; flex-direction:column; gap:8px; scroll-margin-top:70px; }
.bloc-label{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.part{ display:flex; flex-direction:column; gap:4px; }
.rubric{
  font-family:"Archivo",sans-serif; font-style:italic; font-size:calc(.78rem * var(--font-scale));
  color:var(--rubric); white-space:pre-line;
}
.speaker{ color:var(--rubric); font-weight:700; font-style:normal; }
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
.cols.single{ grid-template-columns:1fr; }
.la-col, .fr-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.la, .fr{
  font-size:calc(1rem * var(--font-scale)); line-height:1.5; margin:0; white-space:pre-line;
}
.fr{ font-style:italic; color:var(--ink-soft); }
.fr-col{ border-left:1px solid var(--line); padding-left:14px; }
.cols.single .fr-col{ border-left:none; padding-left:0; }
.section-title{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  color:var(--rubric);
}

.comment-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-family:"Archivo",sans-serif; font-size:.72rem; letter-spacing:.03em;
  color:var(--violet); font-weight:600; cursor:pointer;
  margin-top:6px; padding:.6em .2em; border-top:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-bottom:none; width:100%; text-align:left;
}
.comment-toggle .chev{ font-size:.7rem; color:var(--ink-soft); transition:transform .15s; }
.comment-toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.lebrun-card{
  background:var(--violet-soft); border-radius:10px; padding:12px 14px;
  font-size:calc(.9rem * var(--font-scale)); line-height:1.5; font-style:italic;
}
.lebrun-card cite{
  display:block; margin-top:6px; font-family:"Archivo",sans-serif; font-style:normal;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.lebrun-card .statut{
  display:block; margin-top:6px; font-family:"Archivo",sans-serif; font-style:normal;
  font-size:.6rem; color:var(--ink-soft);
}

.fab{
  position:fixed; right:20px; bottom:78px; z-index:4;
  display:flex; align-items:center; gap:7px;
  background:var(--violet); color:#fbf3f8;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:.8rem;
  padding:.75em 1.1em .75em .9em; border-radius:999px; box-shadow:var(--shadow);
  border:none; cursor:pointer;
}
.fab .bars{display:flex; flex-direction:column; gap:2px;}
.fab .bars i{display:block; width:14px; height:1.5px; background:#fbf3f8; border-radius:1px;}
.fab .bars i:nth-child(2){width:10px;}

/* ---- sommaire sheet ---- */
.sheet{ position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.35); display:flex; align-items:flex-end; }
.sheet[hidden]{ display:none; }
.sheet-inner{
  background:var(--surface); width:100%; max-height:75vh; overflow-y:auto;
  border-radius:20px 20px 0 0; padding:16px 0 24px;
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 18px 14px; font-family:"Cormorant Garamond",serif; font-weight:600; font-size:1.2rem;
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.sommaire-list button{
  display:flex; align-items:baseline; gap:12px; width:100%;
  border:none; background:none; color:var(--ink); text-align:left; cursor:pointer;
  padding:12px 18px; border-bottom:1px solid var(--line); font-family:"EB Garamond",serif; font-size:1rem;
}
.sommaire-list button .n{
  font-family:"Cormorant Garamond",serif; font-weight:600; color:var(--gold); width:1.6em; flex:none;
}

/* ---- Explorer ---- */
.explorer-list{ display:flex; flex-direction:column; }
.ord-item{
  display:flex; align-items:baseline; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line);
}
.ord-item .n{ font-family:"Cormorant Garamond",serif; font-weight:600; color:var(--gold); font-size:1.05rem; width:1.6em; flex:none; }
.ord-item .t{ flex:1; display:flex; flex-direction:column; gap:2px; }
.ord-item .t b{ font-weight:500; font-size:1rem; }
.ord-item .t small{ font-family:"Archivo",sans-serif; font-size:.68rem; color:var(--ink-soft); }

.empty-state{ color:var(--ink-soft); font-style:italic; padding:40px 0; text-align:center; }

@media (max-width:480px){
  .app-feast{ font-size:1rem; }
}