/* ════════════════════════════════════════════════════════════════ SirajWay — sw-responsive.css Typographie fluide + Responsive PC / Tablette / Mobile Chargé après les CSS inline des pages pour surcharger proprement ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 1. VARIABLES GLOBALES DE TAILLE ────────────────────────────────────────────────────────────── */ :root { /* Base corps de texte — fluide entre 375px et 1440px */ --fs-base: clamp(1.05rem, 1.1rem + 0.2vw, 1.20rem); /* ~17-19px */ --fs-body: clamp(1.05rem, 1.1rem + 0.3vw, 1.25rem); /* corps paragraphes */ --fs-small: clamp(0.82rem, 0.80rem + 0.2vw, 0.95rem); /* labels, métadonnées */ --fs-tiny: clamp(0.72rem, 0.70rem + 0.15vw, 0.80rem);/* badges */ /* Latin décoratif (Cinzel / Cormorant) */ --fs-nav: clamp(0.92rem, 0.90rem + 0.15vw, 1.05rem); --fs-section: clamp(0.80rem, 0.78rem + 0.10vw, 0.88rem); --fs-card-name: clamp(0.88rem, 0.86rem + 0.15vw, 1.00rem); /* Arabe (Noto Naskh Arabic) — volontairement plus grand */ --fs-ar-body: clamp(1.25rem, 1.20rem + 0.4vw, 1.55rem); /* corps arabe */ --fs-ar-verse: clamp(1.50rem, 1.45rem + 0.8vw, 2.10rem); /* versets coraniques */ --fs-ar-title: clamp(1.35rem, 1.30rem + 0.6vw, 1.80rem); /* titres arabes */ --fs-ar-hero: clamp(1.80rem, 1.70rem + 1.2vw, 2.80rem); /* hero arabe */ --fs-ar-nav: clamp(0.88rem, 0.86rem + 0.10vw, 0.96rem);/* sidebar arabe — aligné sur --fs-nav */ --fs-ar-small: clamp(1.00rem, 0.95rem + 0.20vw, 1.10rem);/* ref, badge arabe */ /* Interlignage arabe */ --lh-ar: 2.0; --lh-ar-dense: 1.85; --lh-ar-loose: 2.3; } /* ────────────────────────────────────────────────────────────── 2. POLICE ARABE — BOOST GLOBAL Cible tout élément portant du texte en arabe ────────────────────────────────────────────────────────────── */ /* html/body RTL — police arabe UNIQUEMENT, pas de font-size (évite de casser le rem baseline) */ html[dir="rtl"], body[dir="rtl"] { font-family: 'Noto Naskh Arabic', serif; } /* Classe utilitaire .ar-text — NE PAS inclure [dir="rtl"] ici (ciblerait ) */ .ar-text, [class*="-ar"], [class*="_ar"], [class*="arabic"], [class*="-ar-"] { font-family: 'Noto Naskh Arabic', serif !important; font-size: var(--fs-ar-body) !important; line-height: var(--lh-ar) !important; letter-spacing: 0 !important; } /* Versets coraniques */ .ayah-ar, .ayah-block .ar-text, .verset-ar, .ruling-verset-ar, .hadith-ar, .dua-arabic, .hadith-arabic, .quran-ar, .verse-banner__ar, [class*="verset-ar"], [class*="verse-ar"], [class*="-arabic"] { font-size: var(--fs-ar-verse) !important; line-height: var(--lh-ar-loose) !important; } /* Titres et noms arabes */ .hero-arabic, .prophet-name-ar, .chapter-title-ar, .card-title-ar, [class*="title-ar"], [class*="name-ar"], [class*="-hero-ar"] { font-size: var(--fs-ar-title) !important; line-height: var(--lh-ar-dense) !important; } /* Hero principal arabe */ .hero__title .ar-text, .hero-title-ar, .hero__ar, .hero-eyebrow .ar-text { font-size: var(--fs-ar-hero) !important; } /* Navigation sidebar arabe — même taille que Latin, police Naskh */ .nav-link[data-ar], .nav-item[data-ar] { font-family: 'Noto Naskh Arabic', serif; font-size: var(--fs-ar-nav) !important; /* = 0.88–0.96rem, aligné sur Latin */ } /* Boutons de langue */ .lang-btn[data-lang="ar"], .sb-lang-btn[data-lang="ar"], .tn-lang-btn[data-lang="ar"] { font-family: 'Noto Naskh Arabic', serif; font-size: var(--fs-ar-nav) !important; } /* Spans arabes DANS les nav-items (data-ar sur l'enfant) */ .nav-item span[data-ar], .nav-link span[data-ar] { font-family: 'Noto Naskh Arabic', serif; font-size: var(--fs-ar-nav) !important; } /* Références, badges, métadonnées arabes */ .verse-banner__ref-ar, .ayah-ref .ar-text, .verset-ref .ar-text, .hadith-ref-ar, .footer-tagline, [class*="ref-ar"], [class*="-meta-ar"] { font-size: var(--fs-ar-small) !important; line-height: 1.7 !important; } /* Descriptions / traductions arabes */ .ayah-tr, .verset-tr, .ruling-verset-fr, .dua-transliteration, [class*="-desc-ar"], [class*="-tr-ar"] { font-size: var(--fs-ar-body) !important; line-height: var(--lh-ar) !important; } /* ────────────────────────────────────────────────────────────── 3. CORPS DE TEXTE LATIN — SCALING FLUIDE ────────────────────────────────────────────────────────────── */ body { font-size: var(--fs-base) !important; line-height: 1.75 !important; } /* Paragraphes de contenu */ .hero-desc, .hero__sub, .hero-subtitle, .section-intro, .ruling-desc, .ayah-tr, .verset-tr, p { font-size: var(--fs-body); line-height: 1.80; } /* ── SIDEBAR NAVIGATION — harmonisation tailles FR / AR / EN ── */ /* Taille uniforme pour tous les items (modules + homepage) */ .nav-link, .nav-item { font-size: 0.88rem !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Spans internes dans .nav-item (homepage) */ .nav-item > span:not(.nav-badge):not(.nav-item__dot) { font-size: inherit !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } /* Labels de section */ .nav-section-label { font-size: 0.70rem !important; letter-spacing: 0.14em !important; } /* Section labels */ .section-label, .eyebrow, .hero-eyebrow, .mod-group-label, .cat-label, .config-label { font-size: var(--fs-section) !important; } /* Noms de modules / cartes */ .mod-card__name, .card-title, .hadith-title, .dua-title, .chapter-title { font-size: var(--fs-card-name) !important; } /* Textes secondaires */ .muted, .meta, [class*="-ref"]:not([class*="-ar"]), [class*="-source"], [class*="-date"]:not([class*="-ar"]) { font-size: var(--fs-small) !important; } /* Badges */ .badge, .nav-badge, .mod-badge, .ruling-badge, .school-tag { font-size: var(--fs-tiny) !important; } /* ────────────────────────────────────────────────────────────── 4. SIDEBAR — LAYOUT PC ────────────────────────────────────────────────────────────── */ /* Logo sidebar */ .sidebar-logo-text, .sidebar__brand-text { font-size: clamp(1.20rem, 1.15rem + 0.2vw, 1.40rem) !important; } /* Lanterne */ .sidebar-lanterne, .sidebar-logo img { width: clamp(36px, 3.5vw, 48px) !important; height: clamp(36px, 3.5vw, 48px) !important; } /* Boutons langue */ .lang-btn, .sb-lang-btn { font-size: clamp(0.72rem, 0.70rem + 0.1vw, 0.80rem) !important; min-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 3px !important; } /* Boutons pied de sidebar */ .sidebar__foot-btn { font-size: clamp(0.66rem, 0.64rem + 0.08vw, 0.74rem) !important; min-height: 34px !important; padding: 5px 7px !important; letter-spacing: 0.08em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ────────────────────────────────────────────────────────────── 5. TABLETTE — max-width: 1024px ────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --fs-ar-body: clamp(1.20rem, 1.15rem + 0.5vw, 1.45rem); --fs-ar-verse: clamp(1.40rem, 1.35rem + 0.9vw, 1.90rem); --fs-ar-hero: clamp(1.60rem, 1.55rem + 1.0vw, 2.40rem); } .main-content, .main { padding-left: clamp(1rem, 3vw, 2rem) !important; padding-right: clamp(1rem, 3vw, 2rem) !important; } } /* ────────────────────────────────────────────────────────────── 6. MOBILE — max-width: 900px Sidebar cachée, topnav hamburger ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* ── Topnav mobile ── */ .mobile-nav, .topnav { height: 56px !important; padding: 0 1rem !important; } .topnav__logo-txt, .mobile-nav span { font-size: clamp(0.88rem, 3.5vw, 1.0rem) !important; } /* ── Hamburger — zone de clic suffisante ── */ .hamburger, .topnav__menu-btn { width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ── Hero ── */ .hero, .hero-section { padding: 2.5rem 1.25rem 2rem !important; } .hero__title, .hero-title { font-size: clamp(1.8rem, 6vw, 2.8rem) !important; line-height: 1.15 !important; } .hero-arabic { font-size: clamp(1.5rem, 5.5vw, 2.0rem) !important; line-height: 1.9 !important; } .hero-desc, .hero__sub { font-size: clamp(1.0rem, 3.5vw, 1.15rem) !important; } /* ── Versets sur mobile ── */ .ayah-ar, .verset-ar, .verse-banner__ar, .ruling-verset-ar, [class*="arabic"], [class*="verset-ar"], [class*="verse-ar"] { font-size: clamp(1.35rem, 4.5vw, 1.70rem) !important; line-height: 2.1 !important; padding: 12px 16px !important; } /* ── Corps arabes général ── */ .ar-text, [class*="-ar"], [class*="_ar"] { font-size: clamp(1.15rem, 3.8vw, 1.40rem) !important; line-height: 2.0 !important; } /* ── Grilles → colonne unique ── */ .mod-row, .mod-grid, .cards-grid, .hadith-grid, .dua-grid, .modules-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* ── Cartes ── */ .mod-card, .hadith-card, .dua-card, .sirah-card, .miracle-card { padding: 1.1rem !important; } .mod-card__name { font-size: clamp(0.85rem, 3vw, 1.0rem) !important; } .mod-card__desc { font-size: clamp(0.90rem, 3.2vw, 1.05rem) !important; } .mod-card__ar { font-size: clamp(1.10rem, 3.5vw, 1.30rem) !important; } /* ── Stats ── */ .stats-row, .stat-row { gap: 1rem !important; flex-wrap: wrap !important; } .stat__num { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; } /* ── Verse banner ── */ .verse-banner { padding: 1.8rem 1.25rem !important; } /* ── Footer ── */ .footer { padding: 1.5rem 1.25rem !important; } /* ── Contenu principal ── */ .main-content section, .content-section, .modules-section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } /* ────────────────────────────────────────────────────────────── 7. PETIT MOBILE — max-width: 480px (smartphones) ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { :root { --fs-base: 1.05rem; --fs-body: 1.05rem; --fs-ar-body: 1.25rem; --fs-ar-verse:1.45rem; --fs-ar-hero: 1.70rem; } /* ── Hero plus compact ── */ .hero, .hero-section { padding: 2rem 1rem 1.5rem !important; } .hero__title, .hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .hero-arabic { font-size: clamp(1.40rem, 6vw, 1.80rem) !important; } /* ── Versets coraniques sur phone ── */ .ayah-ar, .verset-ar, .verse-banner__ar, .ruling-verset-ar, [class*="verset-ar"], [class*="verse-ar"], [class*="arabic"] { font-size: clamp(1.30rem, 5.5vw, 1.55rem) !important; line-height: 2.2 !important; padding: 10px 14px !important; } /* ── Corps arabe ── */ .ar-text, [class*="-ar"], [class*="_ar"] { font-size: clamp(1.15rem, 4.5vw, 1.35rem) !important; line-height: 2.05 !important; } /* ── Corps latin ── */ body { font-size: 1.02rem !important; } p, .hero-desc, .hero__sub { font-size: 1.0rem !important; line-height: 1.75 !important; } /* ── Navigation ── */ .nav-link { font-size: 0.95rem !important; padding: 10px 14px !important; min-height: 44px !important; } /* ── Lang buttons ── */ .lang-btn, .sb-lang-btn { font-size: 0.80rem !important; padding: 8px 6px !important; min-height: 40px !important; } /* ── Filter chips / category tabs ── */ [class*="filter-chip"], [class*="cat-btn"], [class*="tab-btn"] { font-size: 0.78rem !important; padding: 8px 12px !important; min-height: 40px !important; } /* ── Titres de sections ── */ .chapter-title, .card-title, .hadith-title, .dua-title { font-size: 1.10rem !important; } /* ── Verse banner compact ── */ .verse-banner { padding: 1.5rem 1rem !important; } .verse-banner__tr { font-size: 0.98rem !important; } /* ── Content padding minimal ── */ .main-content, .main-content section, .content-section, .modules-section { padding-left: 1rem !important; padding-right: 1rem !important; } /* ── Grilles ── */ .mod-row, .mod-grid, .cards-grid, .hadith-grid, .dua-grid { gap: 10px !important; } /* ── Sidebar overlay backdrop (fermer en cliquant dehors) ── */ .sidebar.open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: -1; } } /* ────────────────────────────────────────────────────────────── 8. SIDEBAR MOBILE — AMÉLIORATIONS ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Sidebar plein écran hauteur, scroll interne */ .sidebar { width: min(280px, 85vw) !important; overflow-y: auto !important; } /* Nav links plus grands (touch targets) */ .nav-link, .nav-item { min-height: 44px !important; padding: 11px 18px !important; font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important; } /* Overlay sombre derrière la sidebar ouverte */ body.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.50); z-index: 150; pointer-events: auto; } /* Sidebar au-dessus de l'overlay */ .sidebar { z-index: 200 !important; } } /* ────────────────────────────────────────────────────────────── 9. MODULES SPÉCIFIQUES — AJUSTEMENTS ────────────────────────────────────────────────────────────── */ /* QuranLink */ .quran-ar, .ql-verse-ar { font-size: var(--fs-ar-verse) !important; line-height: 2.2 !important; } /* Hadith */ .hadith-ar { font-size: var(--fs-ar-verse) !important; line-height: 2.1 !important; } /* Dhikr / Duʿā */ .dua-arabic, .dhikr-arabic, .counter-display { font-size: var(--fs-ar-verse) !important; line-height: 2.1 !important; } /* Fiqh — versets de règles */ .ruling-verset-ar { font-size: var(--fs-ar-verse) !important; line-height: 2.2 !important; } /* Iʿjāz — versets scientifiques */ .miracle-ar, .ijaz-ar, .verse-ar { font-size: var(--fs-ar-verse) !important; line-height: 2.2 !important; } /* Academy / IslamEd */ .lesson-ar, .course-ar, .quiz-ar { font-size: var(--fs-ar-body) !important; line-height: var(--lh-ar) !important; } /* Prophètes — timeline */ .prophet-name-ar { font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.65rem) !important; line-height: 1.8 !important; } .prophet-verset-ar { font-size: var(--fs-ar-verse) !important; line-height: 2.2 !important; } /* QuranMap Graph */ .graph-ar, .node-ar, .surah-ar { font-size: clamp(0.90rem, 0.85rem + 0.3vw, 1.10rem) !important; line-height: 1.7 !important; } /* ────────────────────────────────────────────────────────────── 10. ACCESSIBILITÉ & UX ────────────────────────────────────────────────────────────── */ /* Tous les boutons ont une zone de clic suffisante */ button, [role="button"], .btn, input[type="button"], input[type="submit"] { min-height: 42px; } /* Liens de navigation min-height */ a.nav-link, a.nav-item { display: flex !important; align-items: center !important; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* ────────────────────────────────────────────────────────────── 11. MOBILE-NAV EXTRAS — Boutons Lang + Thème injectés par sw-theme.js ────────────────────────────────────────────────────────────── */ /* ── Container des boutons injectés ── */ .mn-extras { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } /* ── Pill de langue ── */ .mn-lang-pill { display: flex; align-items: center; background: rgba(212,170,80,0.08); border: 1px solid rgba(212,170,80,0.22); border-radius: 999px; padding: 2px 4px; gap: 2px; } .mn-lang-btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; color: rgba(245,239,224,0.65); background: transparent; border: none; border-radius: 999px; padding: 4px 8px; min-width: 28px; min-height: 28px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .mn-lang-btn[data-lang="ar"] { font-family: 'Noto Naskh Arabic', serif; font-size: 1.0rem; letter-spacing: 0; padding: 2px 8px; } .mn-lang-btn.active { background: var(--gold, #D4AA50); color: #060810; } .mn-lang-btn:not(.active):hover { background: rgba(212,170,80,0.15); color: var(--gold, #D4AA50); } /* ── Bouton thème ── */ .mn-theme-btn { display: inline-flex; align-items: center; justify-content: center; background: rgba(212,170,80,0.08); border: 1px solid rgba(212,170,80,0.22); border-radius: 50%; width: 32px; height: 32px; min-height: 32px; font-size: 1.0rem; cursor: pointer; transition: all 0.18s; flex-shrink: 0; color: rgba(245,239,224,0.80); } .mn-theme-btn:hover { background: rgba(212,170,80,0.20); border-color: rgba(212,170,80,0.45); } /* ── Mode jour: couleurs adaptées ── */ html.sw-light .mn-lang-pill { background: rgba(138,95,16,0.10) !important; border-color: rgba(138,95,16,0.25) !important; } html.sw-light .mn-lang-btn { color: rgba(30,26,20,0.65) !important; } html.sw-light .mn-lang-btn.active { background: #8a5e10 !important; color: #fff !important; } html.sw-light .mn-theme-btn { background: rgba(138,95,16,0.10) !important; border-color: rgba(138,95,16,0.25) !important; color: #3e3325 !important; } /* ── Mobile-nav layout avec extras ── */ @media (max-width: 900px) { .mobile-nav { display: flex; align-items: center; gap: 8px; } /* Titre SIRAJWAY prend l'espace restant */ .mobile-nav > span:first-of-type, .mobile-nav > a:first-of-type { flex: 1; } /* Hamburger reste à droite */ .mobile-nav .hamburger { flex-shrink: 0; order: 10; } } /* ────────────────────────────────────────────────────────────── 12. CORRECTIONS LAYOUT MOBILE — Cartes qui débordent ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Siraj intro card (decouvrir pages) */ .siraj-intro { margin: 20px 16px !important; padding: 18px 16px !important; flex-direction: column !important; align-items: flex-start !important; overflow: visible !important; } .siraj-intro .siraj-avatar { width: 56px !important; height: 56px !important; margin-bottom: 8px !important; } .siraj-text strong { white-space: normal !important; word-break: break-word !important; font-size: 0.88rem !important; } .siraj-text p { font-size: 1.05rem !important; } /* Questions list, nextsteps, gold-divider */ .questions-list, .nextsteps, .nextstep-label, .gold-divider { margin-left: 16px !important; margin-right: 16px !important; padding-left: 0 !important; padding-right: 0 !important; } .nextsteps { grid-template-columns: 1fr !important; } /* Hero padding for module pages */ .hero { padding-left: 20px !important; padding-right: 20px !important; padding-top: 72px !important; } /* Prevent any text overflow in cards */ [class*="-card"], [class*="-block"], [class*="-panel"] { overflow-wrap: break-word !important; word-break: break-word !important; } } /* ────────────────────────────────────────────────────────────── 13. PERFORMANCE — Reduce motion for accessibility ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Réduire les transitions non-essentielles mais préserver les animations UI clés */ *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Stopper seulement les animations décoratives non-essentielles */ [data-anim], .star-canvas, #star-canvas, .hero__halo, .haloGlow { animation: none !important; } /* Préserver : lanternFloat, lanternSwing, logoFloat (animations UI importantes) */ } /* ── Image rendering optimization ── */ img { content-visibility: auto; } /* Éviter le débordement horizontal sur mobile */ body { overflow-x: hidden !important; } /* Images responsives */ img { max-width: 100%; height: auto; } /* Longueur de ligne optimale pour la lisibilité */ .hero-desc, .hero__sub, .section-intro, .ruling-desc, [class*="-desc"]:not(.mod-card__desc) { max-width: min(100%, 68ch); }