/* R∴L∴ Fraternité Universelle n°1, Orient de Douala */

:root{
  --nuit:#0A1020; --voute:#0F182C; --pierre:#1B2740; --pierre-clair:#26344F;
  --or:#C8A34A; --or-clair:#E4C87C; --or-sombre:#8A6F2E;
  --craie:#E9E5DB; --craie-att:#C3C0B8; --gris:#8B93A8; --gris-sombre:#5A6379;
  --vert:#5BA377; --ambre:#D4913E; --rouge:#BE5B50; --azur:#6E8FC0;
  --r:3px; --r-l:6px;
  --ombre:0 1px 0 rgba(255,255,255,.03), 0 8px 28px -18px rgba(0,0,0,.9);
  /* Cinzel pour les titres, capitales romaines lapidaires.
     Cormorant reste la serif de lecture pour les documents. */
  --display:"Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --cond:"Barlow Condensed", "Arial Narrow", sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--nuit); color:var(--craie);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.55) 0% 25%, transparent 0% 50%) 0 0/22px 22px;
  opacity:.018;
}
a{color:var(--or-clair); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--or); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Cinzel n'a pas d'italique et ses bas-de-casse sont des petites capitales :
   on l'espace légèrement et on lui laisse plus d'interligne. */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; text-wrap:balance;
  letter-spacing:.045em; line-height:1.24; font-style:normal}
.eyebrow{font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--or); font-weight:500; margin:0}
.muted{color:var(--gris)}
.num{font-variant-numeric:tabular-nums}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* Vitrine */
.vitrine{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 28px 80px}
.v-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 0; flex-wrap:wrap}
.sceau{display:flex; align-items:center; gap:12px}
.sceau svg{width:38px;height:38px;flex:none}
.sceau b{font-family:var(--display); font-size:15.5px; font-weight:500; display:block;
  line-height:1.3; letter-spacing:.05em}
.sceau span{font-family:var(--cond); text-transform:uppercase; letter-spacing:.15em; font-size:11px; color:var(--gris)}
.v-hero{padding:56px 0 48px 28px; border-top:1px solid var(--pierre); position:relative}
.v-hero::after{content:""; position:absolute; left:0; top:0; width:1px; height:100%;
  background:linear-gradient(180deg, var(--or), transparent)}
.v-hero h1{font-size:clamp(26px,4.6vw,46px); line-height:1.28; font-weight:400; margin:16px 0 20px;
  letter-spacing:.05em}
.v-hero h1 em{font-style:normal; color:var(--or-clair); display:block; margin-top:6px}
.v-lede{font-size:18px; max-width:60ch; color:var(--craie-att); font-weight:300}
.coords{display:flex; gap:26px; flex-wrap:wrap; margin-top:30px; font-family:var(--cond);
  text-transform:uppercase; letter-spacing:.13em; font-size:12px; color:var(--gris)}
.coords b{display:block; font-family:var(--sans); font-size:15px; letter-spacing:0; text-transform:none; color:var(--craie); font-weight:400}
.v-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px;
  background:var(--pierre); border:1px solid var(--pierre); margin-top:56px}
.v-cell{background:var(--voute); padding:26px 24px}
.v-cell h3{font-size:16px; margin-bottom:10px}
.v-cell p{margin:0; color:var(--gris); font-size:14px}
.v-foot{margin-top:56px; padding-top:22px; border-top:1px solid var(--pierre); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--gris-sombre)}

/* Boutons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r);
  border:1px solid var(--pierre-clair); background:transparent; color:var(--craie); cursor:pointer;
  font-size:14px; transition:border-color .15s, background .15s; text-decoration:none}
.btn:hover{border-color:var(--or-sombre); background:rgba(200,163,74,.06); text-decoration:none}
.btn-or{background:var(--or); border-color:var(--or); color:#14100A; font-weight:500}
.btn-or:hover{background:var(--or-clair); border-color:var(--or-clair)}
.btn-sm{padding:5px 11px; font-size:13px}
.btn-danger:hover{border-color:var(--rouge); background:rgba(190,91,80,.1); color:#E8988F}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* Application */
.app{position:relative; z-index:1; display:grid; grid-template-columns:246px 1fr; min-height:100vh}
.side{border-right:1px solid var(--pierre); background:rgba(15,24,44,.6); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto}
.side-top{padding:20px 18px 16px; border-bottom:1px solid var(--pierre)}
.nav{padding:10px; flex:1}
.nav-grp{font-family:var(--cond); text-transform:uppercase; letter-spacing:.15em; font-size:11px;
  color:var(--gris-sombre); padding:14px 10px 6px}
.nav a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px;
  border-radius:var(--r); color:var(--craie-att); font-size:14px; border-left:2px solid transparent}
.nav a:hover{background:rgba(255,255,255,.03); text-decoration:none}
.nav a.on{background:rgba(200,163,74,.09); color:var(--or-clair); border-left-color:var(--or)}
.nav .cnt{font-size:11px; color:var(--gris-sombre); font-variant-numeric:tabular-nums}
.side-bot{padding:14px 18px; border-top:1px solid var(--pierre); font-size:13px}
.side-bot .nm{color:var(--craie); font-family:var(--display); font-size:14px; letter-spacing:.04em}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 32px 18px; border-bottom:1px solid var(--pierre)}
.topbar h2{font-size:22px; font-weight:400}
.topbar .sub{color:var(--gris); font-size:13px; margin-top:2px}
.content{padding:26px 32px 70px; max-width:1180px}
.burger{display:none}

/* Blocs */
.card{border:1px solid var(--pierre); background:var(--voute); border-radius:var(--r-l)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--pierre); display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-h h3{font-size:15.5px}
.card-b{padding:18px}
.rows{display:flex; flex-direction:column; gap:14px}
.cols{display:grid; gap:14px}
.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.c4{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}

.stat{border:1px solid var(--pierre); border-radius:var(--r-l); padding:16px 18px; background:var(--voute)}
.stat .k{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--gris)}
.stat .v{font-family:var(--serif); font-size:34px; line-height:1.1; margin-top:4px;
  font-variant-numeric:tabular-nums; letter-spacing:0}
.stat .n{font-size:12px; color:var(--gris-sombre); margin-top:2px}

.chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:12px;
  border:1px solid var(--pierre-clair); color:var(--craie-att); white-space:nowrap; font-family:var(--cond);
  text-transform:uppercase; letter-spacing:.09em}
.chip.or{border-color:var(--or-sombre); color:var(--or-clair); background:rgba(200,163,74,.08)}
.chip.vert{border-color:rgba(91,163,119,.45); color:#8FCBA6; background:rgba(91,163,119,.1)}
.chip.ambre{border-color:rgba(212,145,62,.45); color:#EFB874; background:rgba(212,145,62,.1)}
.chip.rouge{border-color:rgba(190,91,80,.45); color:#E39289; background:rgba(190,91,80,.1)}
.chip.azur{border-color:rgba(110,143,192,.45); color:#9CB7DE; background:rgba(110,143,192,.1)}

.deg{display:inline-block; min-width:20px; text-align:center; font-family:var(--cond); font-size:12px;
  letter-spacing:.06em; color:var(--or); border:1px solid var(--or-sombre); border-radius:2px; line-height:16px; padding:0 3px}

table{width:100%; border-collapse:collapse; font-size:14px}
.tw{overflow-x:auto}
th{font-family:var(--cond); text-transform:uppercase; letter-spacing:.13em; font-size:11px; color:var(--gris);
  text-align:left; font-weight:500; padding:8px 12px; border-bottom:1px solid var(--pierre); white-space:nowrap}
td{padding:9px 12px; border-bottom:1px solid rgba(27,39,64,.7); vertical-align:middle}
tbody tr:hover{background:rgba(255,255,255,.018)}
tbody tr:last-child td{border-bottom:none}
td.num, th.num{font-variant-numeric:tabular-nums; text-align:right}

.line{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid rgba(27,39,64,.7)}
.line:last-child{border-bottom:none}
.line .t{font-size:14px}
.line .d{font-size:12.5px; color:var(--gris)}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field > label{font-family:var(--cond); text-transform:uppercase; letter-spacing:.13em; font-size:11px; color:var(--gris)}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=password],
input[type=email],input[type=file],select,textarea{
  width:100%; padding:8px 10px; background:#0B1424; border:1px solid var(--pierre-clair);
  border-radius:var(--r); font-size:14px}
textarea{min-height:110px; resize:vertical; line-height:1.5}
select{cursor:pointer}
select.mini{width:auto; min-width:150px; padding:4px 8px}
.inline{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.checks{display:grid; gap:4px 14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  max-height:240px; overflow-y:auto; border:1px solid var(--pierre-clair); border-radius:var(--r); padding:10px}
.checks label{display:flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer; padding:2px 0}
.checks input{accent-color:var(--or)}

.empty{padding:34px 20px; text-align:center; color:var(--gris-sombre); font-size:14px}
.warn{border:1px solid rgba(212,145,62,.4); background:rgba(212,145,62,.07); border-radius:var(--r);
  padding:11px 14px; font-size:13.5px; color:#EFC48E; margin-bottom:14px}
.ok{border:1px solid rgba(91,163,119,.4); background:rgba(91,163,119,.08); border-radius:var(--r);
  padding:11px 14px; font-size:13.5px; color:#9CD3B2; margin-bottom:14px}
.err{border:1px solid rgba(190,91,80,.45); background:rgba(190,91,80,.09); border-radius:var(--r);
  padding:11px 14px; font-size:13.5px; color:#E8988F; margin-bottom:14px}
.bar{height:5px; background:var(--pierre); border-radius:3px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--or)}

.login-wrap{position:relative; z-index:1; min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:30px 18px}
.login{width:100%; max-width:410px}

/* Document imprimable */
.doc-print{background:#F7F4EC; color:#161310; padding:44px 46px; border-radius:var(--r);
  font-family:var(--serif); font-size:16.5px; line-height:1.65}
.doc-print h2,.doc-print h3{font-family:var(--display); color:#161310; letter-spacing:.045em}
.doc-print .dp-h{text-align:center; border-bottom:1px solid #B9AE93; padding-bottom:16px; margin-bottom:22px}
.doc-print .dp-lab{font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:#6B6252; margin:0}
.doc-print pre{font-family:var(--serif); font-size:16.5px; white-space:pre-wrap; margin:0}

@media print{
  body::before,.side,.topbar,.no-print{display:none!important}
  .app{display:block}
  .content{padding:0; max-width:none}
  body{background:#fff; color:#000}
  .doc-print{border:none; padding:0; background:#fff}
}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed; z-index:40; width:246px; left:0; top:0; transform:translateX(-100%);
    transition:transform .2s; background:var(--voute)}
  .side.open{transform:none}
  .burger{display:inline-flex}
  .topbar,.content{padding-left:18px; padding-right:18px}
  .v-hero{padding-left:20px}
}

/* ---- Feuille d'appel, au Temple, sur téléphone ---- */
.appel-tete{display:flex; gap:20px; flex-wrap:wrap; align-items:baseline; padding:12px 16px;
  border:1px solid var(--pierre); border-radius:var(--r-l); background:var(--voute);
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.13em; font-size:11.5px; color:var(--gris)}
.appel-tete b{font-family:var(--serif); font-size:23px; color:var(--or-clair); letter-spacing:0; margin-left:6px}
.appel{display:flex; flex-direction:column; gap:8px; padding-bottom:6px}
.appel-l{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border:1px solid var(--pierre); border-radius:var(--r-l); background:var(--voute)}
.appel-n b{font-size:15px; display:block; font-weight:400}
.appel-n span{font-size:12.5px; color:var(--gris)}
.appel-b{display:flex; gap:8px}
.appel-b label{position:relative; display:flex; align-items:center; justify-content:center;
  width:58px; height:46px; border:1px solid var(--pierre-clair); border-radius:var(--r);
  font-family:var(--cond); font-size:18px; letter-spacing:.08em; color:var(--gris);
  cursor:pointer; user-select:none}
.appel-b input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.appel-b label.on.ap-p{border-color:var(--vert); background:rgba(91,163,119,.16); color:#8FCBA6}
.appel-b label.on.ap-e{border-color:var(--ambre); background:rgba(212,145,62,.16); color:#EFB874}
.appel-b label.on.ap-a{border-color:var(--rouge); background:rgba(190,91,80,.16); color:#E39289}
.appel-pied{position:sticky; bottom:0; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:14px 0 6px; background:linear-gradient(to top, var(--nuit) 65%, transparent)}
@media (max-width:560px){
  .appel-l{flex-direction:column; align-items:stretch; gap:10px}
  .appel-b{gap:10px}
  .appel-b label{flex:1; width:auto; height:50px}
  .appel{padding-bottom:8px}
}

/* ---- Éphéméride ---- */
.ephem{overflow:hidden}
.ephem-tete{position:relative; padding:20px 20px 18px; border-bottom:1px solid var(--pierre);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(200,163,74,.10), transparent 60%),
    linear-gradient(180deg, rgba(200,163,74,.05), transparent)}
.ephem-h{position:absolute; top:18px; right:20px; font-family:var(--serif); font-size:21px;
  color:var(--or-clair); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.ephem-jour{font-family:var(--cond); text-transform:uppercase; letter-spacing:.22em;
  font-size:11.5px; color:var(--or)}
.ephem-date{font-family:var(--display); font-size:25px; font-weight:400; letter-spacing:.03em;
  color:var(--craie); margin-top:5px; line-height:1.2}
.ephem-vl{font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--craie-att);
  margin-top:9px; padding-top:9px; border-top:1px solid rgba(200,163,74,.18)}
.ephem-liste{padding:6px 20px 14px}
.ephem-l{display:flex; align-items:center; gap:14px; padding:11px 0;
  border-bottom:1px solid rgba(27,39,64,.7)}
.ephem-l:last-child{border-bottom:none}
.ephem-l.passe{opacity:.45}
.ephem-j{flex:none; width:40px; height:40px; border:1px solid var(--pierre-clair); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:18px;
  color:var(--craie-att); font-variant-numeric:tabular-nums}
.ephem-l.auj .ephem-j{border-color:var(--or); color:var(--or-clair); background:rgba(200,163,74,.12);
  box-shadow:0 0 0 3px rgba(200,163,74,.07)}
.ephem-n{flex:1; min-width:0}
.ephem-n b{display:block; font-weight:400; font-size:14.5px; color:var(--craie);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ephem-n span{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--gris); margin-top:2px}
.ephem-pt{width:7px; height:7px; border-radius:50%; flex:none; background:var(--gris)}
.ephem-pt.azur{background:var(--azur)} .ephem-pt.or{background:var(--or)}
.ephem-pt.vert{background:var(--vert)} .ephem-pt.ambre{background:var(--ambre)}
.ephem-ans{flex:none; text-align:right; font-family:var(--serif); font-size:21px; color:var(--craie-att);
  line-height:1; font-variant-numeric:tabular-nums}
.ephem-ans span{display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:10px; color:var(--gris-sombre); margin-top:3px}
.ephem-l.auj .ephem-ans{color:var(--or-clair)}
.ephem-vide{padding:22px 2px; color:var(--gris); font-size:14px; line-height:1.6}
.ephem-vide span{display:block; margin-top:8px; font-size:12.5px; color:var(--gris-sombre)}
.ephem-l.suite{border-top:none; padding-top:0; margin-top:-8px}
.ephem-j.vide{border-color:transparent; background:none}
.ephem-l.suite .ephem-n span{margin-top:0}
.ephem-l.auj .ephem-j.vide{border-color:transparent; background:none; box-shadow:none}
.ephem-sect{padding:4px 20px 12px}
.ephem-sect + .ephem-sect{border-top:1px solid var(--pierre)}
.ephem-titre{font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:10.5px;
  color:var(--gris-sombre); padding:14px 0 4px}
.ephem-j.ev{flex-direction:column; gap:0; line-height:1.05}
.ephem-j.ev b{font-weight:400; font-size:16px}
.ephem-j.ev span{font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:9.5px; color:var(--gris-sombre)}
.ephem-l.ev .ephem-n b{color:var(--craie)}
.ephem-l.ev.auj .ephem-j.ev span{color:var(--or)}
.ephem-l.ev .ephem-n b{white-space:normal; line-height:1.35}
@media (min-width:980px){
  /* Sur deux colonnes, les filets de séparation deviennent bancals : on les remplace
     par de l'espace, et le titre de section court sur toute la largeur. */
  .ephem-sect{display:grid; grid-template-columns:1fr 1fr; column-gap:32px; align-items:start}
  .ephem-titre{grid-column:1 / -1}
  .ephem-sect .ephem-l{border-bottom:none; padding:8px 0}
  .ephem-sect .ephem-l.suite{margin-top:-10px}
}