*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#06060f;color:#e8e6e3;font-family:Inter,sans-serif;line-height:1.6}
.ar{font-family:Amiri,serif}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:center;gap:2px;padding:10px 10px;background:rgba(6,6,15,.95);backdrop-filter:blur(15px);border-bottom:1px solid #1e1e35;flex-wrap:wrap}
#nav-burger{display:none;background:none;border:none;color:#c9a227;font-size:1.5em;cursor:pointer;padding:4px 10px}
#nav-items{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;align-items:center}
@media(max-width:768px){
#nav{justify-content:space-between;padding:8px 14px;align-items:center}
#nav-burger{display:block}
#lang-sw{margin-left:auto}
#nav-items{display:none;flex-direction:column;width:100%;gap:4px;padding:10px 14px;background:rgba(6,6,15,.98);border-bottom:1px solid #1e1e35;position:absolute;top:100%;left:0;right:0}
#nav-items.open{display:flex;animation:navIn .2s ease}
#nav-items button{width:100%;text-align:left;padding:10px 16px;font-size:.88em;display:flex;justify-content:space-between;align-items:center}
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
}
#nav button{padding:6px 14px;background:#0d0d1a;border:1px solid #1e1e35;color:#7a7885;cursor:pointer;border-radius:6px;font-size:.8em;font-family:Inter;transition:all .2s}
#nav button:hover{border-color:#8a7222;color:#c9a227}
#nav button.active{background:#c9a227;color:#000;font-weight:600}

/* PAGES */
.page{display:none;padding-top:70px;min-height:100vh}
.page.active{display:block}
section{padding:40px 20px;max-width:1000px;margin:0 auto}
section h2{font-family:Amiri,serif;font-size:clamp(1.6rem,4vw,2.5rem);color:#c9a227;text-align:center;margin-bottom:10px}
.sub{text-align:center;color:#7a7885;margin-bottom:40px;font-size:.9em}

/* HERO */
.hero{min-height:calc(100vh - 70px);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;text-align:center;padding:40px 20px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(201,162,39,.08) 0%,transparent 70%)}
.big-ar{font-family:Amiri,serif;font-size:clamp(5rem,15vw,10rem);color:#c9a227;opacity:.12;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:br 6s infinite}
@keyframes br{0%,100%{opacity:.08}50%{opacity:.2}}
.hero h1{font-size:clamp(2.5rem,8vw,5rem);color:#c9a227;line-height:1.1;z-index:1;letter-spacing:2px;font-family:Amiri,serif}
.hero p{color:#7a7885;font-size:clamp(.9rem,2vw,1.2rem);max-width:500px;margin:20px auto;z-index:1}
.stats{display:flex;justify-content:center;gap:25px;margin-top:40px;z-index:1;flex-wrap:wrap}
.stat{text-align:center}
.stat .v{font-size:2em;color:#c9a227;font-weight:800}
.stat .l{font-size:.65rem;color:#7a7885;text-transform:uppercase;letter-spacing:1px}

/* ARCHITECTURE */
.lv{display:flex;align-items:center;gap:20px;padding:25px;margin:10px 0;background:#0d0d1a;border:1px solid #1e1e35;border-radius:16px}
.lv .num{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2em;color:#c9a227;border:2px solid #c9a227;flex-shrink:0}
.lv .t{font-size:1.2em;font-weight:600}
.lv .ar-t{font-family:Amiri,serif;font-size:1.5em;color:#c9a227;margin-right:10px}
.lv .d{font-size:.85em;color:#7a7885;margin-top:5px}
.lv .mb{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.lv .b{font-family:Amiri,serif;padding:2px 8px;background:rgba(201,162,39,.15);color:#c9a227;border-radius:4px;font-size:.9em}
.arrow{text-align:center;color:#8a7222;font-size:1.5em;margin:5px 0}
h3{color:#c92227;font-family:Amiri,serif;font-size:1.3em;margin:30px 0 15px;padding-bottom:5px;border-bottom:1px solid #1e1e35}
h3{color:#c9a227}

/* UMM KITAB */
.uk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.uk{background:#0d0d1a;border:1px solid #1e1e35;border-radius:12px;padding:15px;text-align:center}
.uk-b{font-family:Amiri,serif;font-size:1.5em;color:#c9a227}
.uk-s{color:#7a7885;font-size:.75em;margin:5px 0}
.uk-c{color:#ccc;font-size:.8em}

/* THEORIE / PREUVES / SON */
.ti{margin:8px 0;padding:10px 15px;background:#0d0d1a;border-radius:8px;border-left:3px solid #8a7222}
.th{color:#e8e6e3;font-size:.9em;font-weight:600}
.td{color:#7a7885;font-size:.8em;margin-top:3px;line-height:1.5}

/* RAPPORT COMPLET (theorie-content) */
#theorie-content{max-width:1060px;margin:0 auto;text-align:left;font-size:.95em;line-height:1.7;color:#c8c6c2}
#theorie-content h1{font-family:Amiri,serif;color:#c9a227;font-size:1.9em;margin:30px 0 10px;text-align:center;line-height:1.3}
#theorie-content h2{font-family:Amiri,serif;color:#c9a227;font-size:1.5em;margin:45px 0 15px;padding-bottom:8px;border-bottom:2px solid #8a7222;text-align:left}
#theorie-content h3{font-family:Amiri,serif;color:#e0be4a;font-size:1.2em;margin:30px 0 10px;border-bottom:1px solid #1e1e35;text-align:left}
#theorie-content h4{color:#e8e6e3;font-size:1.05em;margin:22px 0 8px;text-align:left}
#theorie-content p{margin:12px 0;color:#c8c6c2}
#theorie-content strong{color:#e8e6e3}
#theorie-content em{color:#a09e9a}
#theorie-content ul,#theorie-content ol{margin:12px 0 12px 25px}
#theorie-content li{margin:6px 0}
#theorie-content blockquote{margin:15px 0;padding:12px 20px;background:rgba(201,162,39,.06);border-left:3px solid #c9a227;border-radius:0 8px 8px 0;color:#d8d6d2;font-style:italic}
#theorie-content hr{border:none;border-top:1px solid #1e1e35;margin:35px 0}
#theorie-content pre{background:#0a0a16;border:1px solid #1e1e35;border-radius:10px;padding:18px;margin:18px 0;overflow-x:auto;line-height:1.45}
#theorie-content pre code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.78em;color:#d8c58a;background:none;padding:0;white-space:pre}
#theorie-content code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.82em;color:#d8c58a;background:rgba(201,162,39,.1);padding:1px 6px;border-radius:4px}
#theorie-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.82em}
#theorie-content thead th{background:rgba(201,162,39,.12);color:#c9a227;text-align:left;padding:10px 12px;border:1px solid #8a7222;font-weight:600}
#theorie-content tbody td{padding:8px 12px;border:1px solid #1e1e35;color:#c8c6c2;vertical-align:top}
#theorie-content tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
#theorie-content tbody tr:hover{background:rgba(201,162,39,.06)}

/* PORTES */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.pc{background:#0d0d1a;border:1px solid #1e1e35;border-radius:16px;padding:25px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.pc:hover{border-color:#c9a227;transform:translateY(-3px)}
.pc .pb{font-family:Amiri,serif;font-size:2.5em;color:#c9a227;text-align:center;margin-bottom:10px;display:block}
.pc .pn{font-size:1.1em;font-weight:600;text-align:center;margin-bottom:5px}
.pc .pt{font-size:.85em;color:#7a7885;text-align:center;margin-bottom:15px}
.pc .pm{font-size:.8em;color:#999;font-style:italic;text-align:center;padding:10px;background:rgba(201,162,39,.05);border-radius:8px;line-height:1.5}
.pc .cnt{position:absolute;top:10px;right:10px;font-size:.75em;color:#8a7222;background:rgba(201,162,39,.1);padding:2px 8px;border-radius:10px}

/* TIMELINE */
.ts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.ts{background:rgba(255,255,255,.03);border:1px solid #1e1e35;border-radius:8px;padding:10px;cursor:pointer;transition:all .2s;display:flex;gap:8px;align-items:center}
.ts:hover{border-color:#c9a227}

/* FATIHA */
.v{padding:20px;margin:8px 0;background:#0d0d1a;border:1px solid #1e1e35;border-radius:12px;display:flex;gap:15px;align-items:center}
.v .n{color:#7a7885;font-size:.8rem;width:30px}
.v .a{font-family:Amiri,serif;font-size:1.5em;color:#e8e6e3;flex-grow:1;text-align:right}
.v .bs{display:flex;gap:3px}
.v .vb{font-family:Amiri,serif;font-size:.8em;padding:2px 6px;background:rgba(201,162,39,.15);color:#c9a227;border-radius:3px}
.fs{display:flex;justify-content:center;gap:30px;margin-top:40px;flex-wrap:wrap}
.fst{text-align:center;padding:15px 25px;background:#0d0d1a;border:1px solid #1e1e35;border-radius:12px}
.fst .v{font-size:2em;color:#c9a227;font-weight:800;border:none;background:none;padding:0;margin:0}
.fst .l{font-size:.75em;color:#7a7885;text-transform:uppercase;letter-spacing:1px}

/* LUNE */
.moon{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:30px 0}
.mp{width:55px;height:55px;border-radius:50%;background:rgba(201,162,39,.15);border:1px solid #8a7222;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.mp:hover{border-color:#c9a227;transform:scale(1.15)}
.bn{font-size:4em;color:#c9a227;font-weight:800;font-family:Amiri,serif;margin:10px 0;text-align:center}

/* FOOTER */
footer{padding:40px 20px;text-align:center;color:#7a7885;font-size:.8rem;border-top:1px solid #1e1e35;margin-top:60px}
.af{font-family:Amiri,serif;font-size:1.5em;color:#c9a227;margin-bottom:10px}

/* MODAL */
#detail{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;padding:60px 20px;overflow-y:auto}
#detail.open{display:flex;justify-content:center;align-items:flex-start}
.dc{background:#0d0d1a;border:1px solid #c9a227;border-radius:20px;padding:30px;max-width:80%;width:80%}
.dc::-webkit-scrollbar{width:4px}
.dc::-webkit-scrollbar-thumb{background:#c9a227;border-radius:2px}
.close{float:right;font-size:1.5em;color:#7a7885;cursor:pointer;background:none;border:none}
.sh{text-align:center;margin-bottom:20px;padding:15px}
.sh .b{font-family:Amiri,serif;font-size:3em;color:#c9a227}
.sh .n{font-size:1.5em;font-weight:600}
.sh .s{font-size:.9em;color:#7a7885}
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc{background:#1a1a2e;border-radius:8px;padding:12px;margin:0;cursor:pointer;transition:background .2s}
.sc:hover{background:#252545}
.sc .sn{color:#c9a227;font-weight:bold;font-size:.85em}
.sc .si{color:#7a7885;font-size:.75em}
.sc .sx{color:#ccc;font-size:.8em;margin-top:5px;line-height:1.5}

@media(max-width:768px){
.pg,.sc-grid,.uk-grid,.ts-grid{grid-template-columns:1fr}
#nav{gap:1px;padding:5px}
#nav button{padding:4px 8px;font-size:.7em}
.lv{flex-direction:column;text-align:center}
.dc{max-width:95%;width:95%;padding:15px}
#theorie-content pre{padding:10px;font-size:.7em}
#theorie-content table{font-size:.72em}
#theorie-content thead th,#theorie-content tbody td{padding:6px 8px}
}

/* ═══ I18N — sélecteur de langue ═══ */
#lang-sw{display:flex;gap:2px;margin-left:auto;align-items:center}
#lang-sw button{padding:4px 10px;font-size:.72em;font-family:Inter,sans-serif}
#lang-sw button[data-lang="ar"]{font-family:Amiri,serif;font-size:.82em}

/* Progress bar bio (même style, visible seulement sur #p-bio) */
#bio-progress{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.05);z-index:250;width:0%;transition:width .1s linear;display:none}
#p-bio.active #bio-progress{display:block}
#bio-progress::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#8a7222,#c9a227);border-radius:0 2px 2px 0}

/* Progress bar sourate (fixed en haut, se remplit au scroll) */
#surah-progress{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.05);z-index:250;width:0%;transition:width .1s linear}
#surah-progress::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#8a7222,var(--sp-col,#c9a227));border-radius:0 2px 2px 0}

/* Versets sur la page sourate (plus de scroll interne) */
.surah-verses{padding:10px 0}
.vcard{border-left:3px solid var(--vc-col,#c9a227)}

/* Bouton retour (pages détail) */
.back-btn{display:inline-block;margin-bottom:20px;padding:8px 18px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.4);border-radius:8px;color:#c9a227;font-size:.85em;cursor:pointer;font-family:inherit;transition:all .2s}
.back-btn:hover{background:#c9a227;color:#06060f}

/* Page bio (remplace l'overlay) */
#p-bio{padding-top:70px;min-height:100vh}
#bio-page-content{max-width:1060px;margin:0 auto;padding:20px 24px 60px}
#p-bio .br-head{text-align:center;margin-bottom:30px;padding:20px 0;border-bottom:1px solid rgba(201,162,39,.3)}
#p-bio .br-ar{font-family:Amiri,serif;font-size:3em;color:#c9a227}
#p-bio .br-name{font-size:1.6em;font-weight:700;color:#e8e6f0;margin-top:10px}
#p-bio .br-title{color:#c9a227;margin-top:5px}
#p-bio .br-count{color:#7a7885;font-size:.8em;margin-top:5px}
#p-bio .br-epigraph{background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.25);border-radius:14px;padding:20px;margin:20px 0;text-align:center}
#p-bio .ep-ar{font-family:Amiri,serif;font-size:1.3em;color:#d8cba0;line-height:2;direction:rtl}
#p-bio .ep-note{color:#7a7885;font-size:.85em;margin-top:10px;font-style:italic}
#p-bio .br-sec{display:flex;align-items:center;gap:12px;margin:30px 0 15px}
#p-bio .br-sec .sn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85em;color:#c9a227;border:1px solid rgba(201,162,39,.4);flex-shrink:0}
#p-bio .br-sec h3{color:#c9a227;font-size:1.05em;font-family:Amiri,serif}
#p-bio p.br-p{color:#c9c7d0;line-height:1.85;font-size:.95em;margin:0 0 18px;text-align:justify}
#p-bio p.br-p.first::first-letter{float:left;font-family:Amiri,serif;font-size:3em;line-height:.8;color:#c9a227;padding:5px 10px 0 0}
#p-bio .cit{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(201,162,39,.15);color:#c9a227;font-size:.7em;cursor:pointer;border:1px solid rgba(201,162,39,.3);margin:0 2px;vertical-align:super}
#p-bio .cit:hover{background:#c9a227;color:#06060f}
#p-bio .br-tabs{display:flex;flex-wrap:nowrap;gap:4px;margin:20px 0;padding:10px 0;border-top:1px solid rgba(201,162,39,.2);border-bottom:1px solid rgba(201,162,39,.2);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#8a7222 transparent;-ms-overflow-style:none;scroll-snap-type:x proximity}
#p-bio .br-tabs::-webkit-scrollbar{height:5px}
#p-bio .br-tabs::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:3px}
#p-bio .br-tabs::-webkit-scrollbar-thumb{background:#8a7222;border-radius:3px}
#p-bio .br-tabs::-webkit-scrollbar-thumb:hover{background:#c9a227}
#p-bio .br-tab{flex-shrink:0;white-space:nowrap;scroll-snap-align:start;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#7a7885;font-size:.78em;cursor:pointer;font-family:inherit;transition:all .2s}
#p-bio .br-tab:hover{border-color:#c9a227;color:#c9a227}
#p-bio .br-tab.active{background:rgba(201,162,39,.15);color:#c9a227;border-color:rgba(201,162,39,.4)}
#p-bio .br-tail{margin-top:30px}
#p-bio .br-hyp{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:20px;margin:20px 0}
#p-bio .br-hyp .lbl{color:#c9a227;font-size:.8em;font-weight:600;margin-bottom:12px}
#p-bio .hyp-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:15px;margin:10px 0}
#p-bio .hyp-card h4{color:#c9a227;font-size:.9em}
#p-bio .hyp-card p{color:#999;font-size:.82em;margin-top:8px;line-height:1.6}
#p-bio .hyp-bar{display:flex;align-items:center;gap:8px;margin:8px 0}
#p-bio .hyp-bar .track{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
#p-bio .hyp-bar .fill{height:100%;border-radius:3px}
#p-bio .br-surats .lbl{color:#c9a227;font-size:.8em;font-weight:600;margin-bottom:10px}
#p-bio .chips{display:flex;flex-wrap:wrap;gap:6px}
#p-bio .chip{padding:4px 10px;border-radius:6px;background:rgba(201,162,39,.1);color:#c9a227;font-size:.78em;cursor:pointer;border:1px solid rgba(201,162,39,.25)}
#p-bio .chip:hover{background:#c9a227;color:#06060f}
#p-bio .br-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}
#p-bio .nv{padding:15px;border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;border:1px solid rgba(255,255,255,.06)}
#p-bio .nv:hover{border-color:rgba(201,162,39,.4)}
#p-bio .nv .dir{color:#c9a227;font-size:.75em;margin-bottom:6px}
#p-bio .nv .who{color:#e8e6f0;font-size:.9em;font-weight:600}
#p-bio .br-pagenav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
#p-bio .pg-btn{text-align:left;padding:14px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:6px}
#p-bio .pg-btn .pg-dir{color:#8a7222;font-size:.64em;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
#p-bio .pg-btn .pg-title{color:#c9c7d0;font-size:.82em;line-height:1.4;white-space:normal;word-wrap:break-word}
#p-bio .pg-btn:hover{border-color:#c9a227}
#p-bio .cit-tip{position:fixed;z-index:600;max-width:400px;background:#0d0d1a;border:1px solid #c9a227;border-radius:12px;padding:14px;display:none;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#p-bio .cit-tip.show{display:block}
#p-bio .ct-ar{font-family:Amiri,serif;font-size:1.1em;color:#e8e6e3;line-height:1.9;direction:rtl;margin-bottom:8px}
#p-bio .ct-fr{color:#bbb;font-size:.85em;line-height:1.5}
#p-bio .ct-src{color:#c9a227;font-size:.75em;margin-bottom:4px}
#p-bio .ct-ref{color:#7a7885;font-size:.75em}

/* Note de repli (contenu non encore traduit) */
.fb-note{max-width:640px;margin:0 auto 18px;padding:8px 14px;border:1px dashed rgba(201,162,39,.45);border-radius:10px;color:#c9a227;font-size:.75em;text-align:center;letter-spacing:.03em}

/* Ligne de traduction sous un verset (Fatiha) */
.v{flex-wrap:wrap}
.vfr{flex-basis:100%;font-size:.85em;color:#bbb;line-height:1.6;border-top:1px solid rgba(255,255,255,.08);padding-top:6px;margin-top:4px}

/* Bordures portées par variable CSS → flip RTL propre */
.pc{border-left:4px solid var(--pc-col,#1e1e35)}
.pc--coeur{border:1px solid rgba(201,162,39,.55);border-left:4px solid #e0be4a;background:rgba(201,162,39,.07);box-shadow:0 0 24px rgba(201,162,39,.18)}
.vcard{border-left:3px solid var(--vc-col,#c9a227)}
.sc-hl{border-left:3px solid #c9a227}
.tl-era-count{text-align:right}