/* Charte commune des pages secondaires (La Mosquée, Agenda, Actualités, Mentions, versions traduites).
   Mêmes couleurs, polices et composants que l'accueil. */
:root{
  --bg:#F3F5F0; --surface:#FFFFFF; --surface-2:#E8EDE5; --line:#D3DBCD;
  --ink:#10241A; --ink-2:#55675B;
  --green:#1D5434; --green-deep:#123A23; --green-soft:#E1EDE3;
  --gold:#A87A2E; --gold-bright:#D2A84E; --gold-soft:#F5ECD8;
  --poster:#E6EFE3; --red:#B3261E;
  --f-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-ar:"Amiri","Geeza Pro","Traditional Arabic",serif;
  --f-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --shadow:0 1px 2px rgba(16,36,26,.06),0 12px 30px -16px rgba(16,36,26,.25);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:84px; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display); font-weight:800; font-stretch:88%; line-height:1.1; margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--green)}
img{max-width:100%; display:block}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--gold-bright); outline-offset:2px}
.wrap{max-width:1140px; margin:0 auto; padding-inline:20px}
.muted{color:var(--ink-2)}
.small{font-size:.86rem}
.eyebrow{font-family:var(--f-display); font-stretch:110%; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:700 .92rem/1 var(--f-body); text-decoration:none; cursor:pointer; padding:12px 20px; border-radius:999px; border:1.5px solid transparent; white-space:nowrap}
.btn-gold{background:var(--gold-bright); color:#2A1C04}
.btn-green{background:var(--green); color:#fff}
.btn-line{border-color:var(--line); background:var(--surface); color:var(--green)}
.btn-line:hover{border-color:var(--gold-bright)}
.btn-wa{background:#1F8F4E; color:#fff}

/* en-tête */
header.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar{display:flex; align-items:center; gap:18px; padding-block:9px}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--ink); margin-right:auto}
.brand img{width:46px; height:46px}
.brand b{display:block; font:800 1.05rem/1 var(--f-display); font-stretch:95%; letter-spacing:.02em}
.brand span{font-size:.76rem; color:var(--ink-2); letter-spacing:.04em}
nav.main{display:flex; gap:18px; font-size:.9rem; font-weight:600}
nav.main a{text-decoration:none; color:var(--ink-2); padding-block:6px; border-bottom:2px solid transparent; white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink); border-bottom-color:var(--gold-bright)}
.lang{font:700 1rem var(--f-ar); text-decoration:none; color:var(--green); padding:4px 10px; border:1.5px solid var(--line); border-radius:999px; white-space:nowrap}
.lang:hover{border-color:var(--gold-bright)}
@media (max-width:1120px){.brand span{display:none}}
@media (max-width:980px){nav.main{display:none}}
@media (max-width:520px){.topbar{gap:10px} .topbar .btn{padding:10px 14px}}

/* bandeau du direct */
.live{background:var(--red); color:#fff}
.live .wrap{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-block:9px; font-weight:700; font-size:.92rem}
.live .rec{width:10px; height:10px; border-radius:50%; background:#fff; animation:clign 1.2s infinite}
@keyframes clign{50%{opacity:.25}}
.live button,.live a{margin-left:auto; background:#fff; color:var(--red); padding:6px 14px; border-radius:999px; text-decoration:none; border:0; font-weight:700; cursor:pointer}
.live-lecteur{background:#000}
.live-lecteur .wrap{padding-block:12px}
.live-lecteur div{position:relative; aspect-ratio:16/9; max-width:880px; margin:0 auto}
.live-lecteur iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* tête de page */
.tete{background:var(--poster); padding-block:44px 34px; border-bottom:1px solid var(--line)}
.tete h1{font-size:clamp(2rem,5vw,3.2rem); margin-top:10px}
.tete .lede{margin-top:12px; color:var(--ink-2); max-width:64ch; font-size:1.06rem}
.tete .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
main{padding-block:36px 80px; min-height:40vh}
section.bloc + section.bloc{margin-top:56px}
.bloc > h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:18px}
.vide{background:var(--surface); border:1px dashed var(--line); border-radius:16px; padding:30px 22px; text-align:center; color:var(--ink-2)}
.chip{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--green-soft); color:var(--green)}
.chip.or{background:var(--gold-soft); color:var(--gold)}
.grille{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:900px){.grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grille{grid-template-columns:1fr}}
.carte{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.carte .corps{padding:16px 18px 18px; display:grid; gap:6px; align-content:start}
.carte h3{font-size:1.15rem}
.texte{font-size:1.04rem; line-height:1.75}
.texte p + p{margin-top:1em}
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:14px}
.photos button{padding:0; border:0; border-radius:10px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; background:var(--surface-2)}
.photos img{width:100%; height:100%; object-fit:cover}
.video{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000 center/cover no-repeat; margin-top:14px; cursor:pointer; border:0; width:100%; padding:0; display:block}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video .bouton{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(29,84,52,.92); display:grid; place-items:center}
.video .bouton::after{content:""; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:6px}
.doc{display:inline-flex; gap:8px; align-items:center; font-weight:700; text-decoration:none; padding:8px 14px; border-radius:10px; background:var(--gold-soft); color:#5A3D00; margin-top:12px}
dialog.boite{width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(12,22,16,.94)}
dialog.boite img{position:absolute; inset:16px 16px 70px; margin:auto; max-width:calc(100% - 32px); max-height:calc(100% - 86px); object-fit:contain}
dialog.boite .barre{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:10px}
dialog.boite button{border:0; border-radius:999px; padding:10px 16px; font-weight:700; background:#fff; color:var(--ink); cursor:pointer}

/* pied de page */
footer{background:var(--surface-2); border-top:4px solid var(--gold-bright); color:var(--ink-2); padding-block:34px; font-size:.88rem}
footer .pied{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start}
@media (max-width:760px){footer .pied{grid-template-columns:1fr}}
footer .id{display:flex; gap:12px; align-items:center}
footer .id img{width:56px; height:56px}
footer .id b{color:var(--ink)}
footer .liens{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:flex-end}
@media (max-width:760px){footer .liens{justify-content:flex-start}}
footer .liens a{color:var(--ink-2); font-weight:600}
footer .suivre{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px}

/* versions de droite à gauche */
[dir="rtl"] body{font-family:var(--f-ar); font-size:18px}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--f-ar); font-stretch:normal; font-weight:700}
[dir="rtl"] .eyebrow{letter-spacing:0; font-family:var(--f-ar); font-size:.9rem}
[dir="rtl"] .brand{margin-right:0; margin-left:auto}
[dir="rtl"] footer .liens{justify-content:flex-start}