/* ============================================================
   Liturgie des Heures — feuille de style partagée
   Réutilisée par toutes les pages (index, temps liturgiques…).
   Système de design décrit dans CLAUDE.md — ne pas diverger.
   ============================================================ */
:root{
  --vellum:#ECE4D4;--vellum-2:#E3D9C6;--ink:#2A2520;--ink-soft:#5B5348;
  --rubric:#A4262C;--gilt:#9C7A2E;--muted:#A79E90;--line:#C9BCA3;
  --violet:#5B4B8A;--gold:#B08A2E;--marian:#3E6E9E;--green:#4E6B4A;--focus:#A4262C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--vellum);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--rubric);color:var(--vellum)}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

header.mast{padding:34px 24px 18px;text-align:center;border-bottom:1px solid var(--line)}
.mast .kicker{font-family:"Marcellus",serif;letter-spacing:.42em;font-size:12px;color:var(--rubric);text-transform:uppercase;margin-bottom:10px;padding-left:.42em}
.mast h1{font-family:"Marcellus",serif;font-weight:400;margin:0;font-size:clamp(30px,6vw,52px);letter-spacing:.02em;line-height:1.05}
.mast h1 a{text-decoration:none}
.mast .tag{color:var(--ink-soft);font-style:italic;margin-top:8px;font-size:17px}

nav.seasons{display:flex;flex-wrap:wrap;justify-content:center;border-bottom:1px solid var(--line);background:rgba(0,0,0,.015)}
nav.seasons a{text-decoration:none;padding:13px 20px;font-size:16px;letter-spacing:.02em;color:var(--ink-soft);border-bottom:3px solid transparent;transition:.18s;display:flex;align-items:center;gap:9px;white-space:nowrap}
nav.seasons a .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
nav.seasons a:hover{color:var(--ink);background:rgba(0,0,0,.03)}
nav.seasons a.here{color:var(--ink);border-bottom-color:var(--rubric);font-weight:500}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
main{display:grid;grid-template-columns:1fr 372px;gap:40px;padding:36px 0 80px}
@media(max-width:880px){main{grid-template-columns:1fr;gap:0;padding-bottom:0}}

.sec-eyebrow{font-family:"Marcellus",serif;letter-spacing:.3em;font-size:11px;text-transform:uppercase;color:var(--rubric);margin-bottom:6px}
.sec h2{font-family:"Marcellus",serif;font-weight:400;font-size:34px;margin:0 0 4px}
.sec .lead{color:var(--ink-soft);font-style:italic;margin:0 0 22px}

.controls{margin-bottom:20px}
.searchbar{position:relative;margin-bottom:14px}
.searchbar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5}
.searchbar input{width:100%;font-family:inherit;font-size:18px;color:var(--ink);background:var(--vellum-2);border:1px solid var(--line);border-radius:2px;padding:12px 14px 12px 42px}
.searchbar input::placeholder{color:var(--muted);font-style:italic}
.searchbar input:focus{border-color:var(--rubric);background:#efe8da}

.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg button{font-family:"Marcellus",serif;font-size:13px;letter-spacing:.08em;background:transparent;border:0;padding:8px 15px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--ink);color:var(--vellum)}
.count{margin-left:auto;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.count b{color:var(--gilt);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.psalm{position:relative;text-align:left;background:var(--vellum-2);border:1px solid var(--line);border-radius:2px;padding:12px 13px 11px;font-family:inherit;color:var(--ink);cursor:pointer;transition:transform .14s,border-color .14s,background .14s;display:flex;flex-direction:column;gap:6px;min-height:78px}
.psalm:hover{transform:translateY(-2px);border-color:var(--gilt)}
.psalm .n{font-size:18px;line-height:1.15}
.psalm .n .sub{display:block;font-size:12px;font-style:italic;color:var(--ink-soft);margin-top:2px}
.psalm .st{margin-top:auto;font-size:12px;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.psalm.rec .st{color:var(--gilt)}
.psalm .st .play{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.psalm.soon{cursor:default;opacity:.72}
.psalm.soon:hover{transform:none;border-color:var(--line)}
.psalm.soon .st{color:var(--muted);font-style:italic}
.psalm.active{background:#efe8da;border-color:var(--rubric);box-shadow:inset 3px 0 0 var(--rubric)}
.psalm.rec::after{content:"";position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--gilt)}

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

aside.player{position:sticky;top:20px;align-self:start}
@media(max-width:880px){
  aside.player{position:fixed;inset:auto 0 0 0;top:auto;z-index:40;transform:translateY(110%);transition:transform .28s ease;background:var(--vellum);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.16);padding:0 16px 16px}
  aside.player.open{transform:translateY(0)}
}
.player-card{background:var(--vellum-2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.player-head{padding:16px 18px 14px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.player-head .ttl{flex:1}
.player-head .eyebrow{font-family:"Marcellus",serif;letter-spacing:.24em;font-size:10px;text-transform:uppercase;color:var(--rubric);margin-bottom:3px}
.player-head h3{font-family:"Marcellus",serif;font-weight:400;font-size:24px;margin:0}
.player-head .close{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 4px}
@media(max-width:880px){.player-head .close{display:block}}
.frame{aspect-ratio:16/9;background:#000}
.frame iframe{width:100%;height:100%;border:0;display:block}
.player-empty{padding:30px 22px;text-align:center;color:var(--ink-soft)}
.player-empty .mark{font-family:"Marcellus",serif;font-size:44px;color:var(--line);line-height:1;margin-bottom:12px}
.player-empty p{margin:0;font-style:italic}
.player-note{padding:12px 18px;font-size:14px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:10px;align-items:center}
.player-note a{color:var(--rubric);text-decoration:none;border-bottom:1px solid transparent}
.player-note a:hover{border-bottom-color:var(--rubric)}

.legend{max-width:1120px;margin:0 auto;padding:22px 24px 60px;display:flex;flex-wrap:wrap;gap:22px;color:var(--ink-soft);font-size:14px;border-top:1px solid var(--line)}
.legend .it{display:flex;align-items:center;gap:8px}
.legend .sw{width:12px;height:12px;border-radius:50%}
.badge-note{display:flex;align-items:center;gap:7px}
.badge-note .g{width:7px;height:7px;border-radius:50%;background:var(--gilt)}
/* ---- Accueil : hero + présentation ---- */
.home-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.hero{text-align:center;padding:54px 0 30px;border-bottom:1px solid var(--line)}
.hero .eyebrow{font-family:"Marcellus",serif;letter-spacing:.3em;font-size:11px;text-transform:uppercase;color:var(--rubric);margin-bottom:12px}
.hero h2{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(26px,4.4vw,40px);margin:0 0 16px;line-height:1.12}
.hero p{max-width:660px;margin:0 auto;color:var(--ink-soft);font-size:19px}
.hero p+p{margin-top:14px}
.hero .verse{font-style:italic;color:var(--rubric)}

.home-section{padding:40px 0 20px}
.home-section .sec-eyebrow{text-align:center}
.home-section h3{font-family:"Marcellus",serif;font-weight:400;font-size:28px;text-align:center;margin:0 0 26px}

.temps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.temps-card{display:block;text-decoration:none;background:var(--vellum-2);border:1px solid var(--line);border-left:4px solid var(--tc,var(--line));border-radius:2px;padding:18px 20px;transition:transform .14s,border-color .14s}
.temps-card:hover{transform:translateY(-2px);border-color:var(--gilt);border-left-color:var(--tc,var(--gilt))}
.temps-card .tc-name{font-family:"Marcellus",serif;font-size:21px;display:flex;align-items:center;gap:10px}
.temps-card .tc-name .dot{width:10px;height:10px;border-radius:50%;background:var(--tc,var(--line));flex:0 0 auto}
.temps-card .tc-desc{color:var(--ink-soft);font-style:italic;font-size:15px;margin-top:6px}
.temps-card .tc-soon{color:var(--muted);font-size:13px;letter-spacing:.04em;margin-top:8px;display:inline-block}

.home-foot{max-width:1120px;margin:0 auto;padding:30px 24px 90px;color:var(--ink-soft);font-size:15px;border-top:1px solid var(--line);text-align:center}
.home-foot a{color:var(--rubric);text-decoration:none;border-bottom:1px solid transparent}
.home-foot a:hover{border-bottom-color:var(--rubric)}

/* ---- Bannière de soutien (type cookies, discrète, refermable) ---- */
.support-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--vellum-2);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.10);transform:translateY(110%);transition:transform .3s ease}
.support-banner.show{transform:translateY(0)}
.support-inner{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.support-inner .sb-text{flex:1;min-width:220px;color:var(--ink);font-size:16px}
.support-inner .sb-text b{font-weight:600}
.support-inner .sb-text .sb-sub{display:block;color:var(--ink-soft);font-style:italic;font-size:14px;margin-top:2px}
.sb-actions{display:flex;align-items:center;gap:10px}
.sb-give{font-family:"Marcellus",serif;letter-spacing:.06em;font-size:14px;text-decoration:none;background:var(--rubric);color:var(--vellum);padding:10px 18px;border-radius:2px;transition:.15s;white-space:nowrap}
.sb-give:hover{background:#8f2025}
.sb-dismiss{background:none;border:0;color:var(--ink-soft);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.sb-dismiss:hover{color:var(--ink)}
@media(max-width:560px){.support-inner{padding:12px 14px}.sb-give{padding:9px 14px}}

/* ---- Page Soutenir ---- */
.support-page{max-width:680px;margin:0 auto;padding:44px 24px 90px}
.support-page .hero{padding:0 0 26px}
.support-page .lead-block{color:var(--ink-soft);margin:0 0 30px}
.support-page .lead-block p{margin:0 0 12px}
.give-card{background:var(--vellum-2);border:1px solid var(--line);border-radius:2px;padding:26px 26px 28px}
.give-q{margin-bottom:22px}
.give-q .q-label{font-family:"Marcellus",serif;letter-spacing:.06em;font-size:13px;text-transform:uppercase;color:var(--rubric);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:inherit;font-size:17px;background:var(--vellum);border:1px solid var(--line);border-radius:2px;padding:9px 16px;color:var(--ink);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--gilt)}
.chip.on{background:var(--ink);color:var(--vellum);border-color:var(--ink)}
.give-amount-free{margin-top:10px;display:flex;align-items:center;gap:8px}
.give-amount-free input{width:110px;font-family:inherit;font-size:17px;color:var(--ink);background:var(--vellum);border:1px solid var(--line);border-radius:2px;padding:8px 10px}
.give-amount-free label{font-size:15px;color:var(--ink-soft)}
.give-go{margin-top:8px}
.give-go a{display:inline-block;font-family:"Marcellus",serif;letter-spacing:.06em;font-size:16px;text-decoration:none;background:var(--rubric);color:var(--vellum);padding:13px 28px;border-radius:2px;transition:.15s}
.give-go a:hover{background:#8f2025}
.give-go .give-note{display:block;margin-top:12px;font-size:14px;color:var(--ink-soft);font-style:italic}
.give-placeholder{margin-top:18px;padding:12px 14px;border:1px dashed var(--muted);border-radius:2px;font-size:14px;color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}