/* DzCommunity — Design System unique (P1) ---------------------------------------- Fusion de dzcommunity.css + modern-community.css en UN seul fichier : tokens (couleurs / espacements / rayons / ombres), layout, composants, dark mode, RTL/typo arabe, bottom-nav mobile, composer. Identité visuelle : vert émeraude algérien (--dz-primary) + accent rouge. Latin : Inter / Outfit · Arabe : Cairo. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;700&family=Cairo:wght@400;500;600;700&display=swap'); /* ========================================================= 1. TOKENS (Design system) ========================================================= */ :root { /* --- Palette de marque : vert émeraude DZ + accent rouge --- */ --dz-primary: #0E7C5A; /* Vert émeraude algérien */ --dz-primary-dark: #0A5E44; /* Émeraude foncé (hover) */ --dz-primary-soft: #D6F0E6; /* Émeraude très clair (fonds) */ --dz-rgb-primary: 14, 124, 90; /* Pour les rgba() */ --dz-accent: #D62828; /* Rouge — actions critiques / accent DZ */ --dz-accent-dark: #B91F1F; --dz-accent-soft: #FDE2E2; --dz-rgb-accent: 214, 40, 40; /* --- Surfaces & texte --- */ --dz-bg-body: #f7f8f7; /* Gris très léger, teinte chaude */ --dz-bg-card: #ffffff; --dz-bg-subtle: #f1f5f3; /* Fonds doux (inputs, hover) */ --dz-border: #e2e8e4; --dz-text-main: #1e293b; /* Slate 800 */ --dz-text-muted: #64748b; /* Slate 500 */ /* --- Rayons --- */ --dz-radius-sm: 8px; --dz-radius-md: 12px; --dz-radius-lg: 16px; --dz-radius-xl: 24px; --dz-radius-pill: 50rem; /* --- Espacements --- */ --dz-space-1: 4px; --dz-space-2: 8px; --dz-space-3: 12px; --dz-space-4: 16px; --dz-space-5: 24px; /* --- Ombres --- */ --dz-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --dz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); --dz-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); /* --- Glassmorphism --- */ --dz-glass: rgba(255, 255, 255, 0.7); --dz-glass-border: rgba(255, 255, 255, 0.5); } /* ========================================================= 2. TYPOGRAPHIE (Latin + Arabe) ========================================================= */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--dz-bg-body); color: var(--dz-text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .brand-font { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; } /* Arabe : Cairo rend bien en RTL et reste lisible en petites tailles. On cible la langue posée sur par le LocaleMiddleware. */ html[lang="ar"] body, html[lang="ar"] .brand-font { font-family: 'Cairo', 'Inter', system-ui, sans-serif; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 { font-family: 'Cairo', sans-serif; letter-spacing: 0; /* l'arabe n'aime pas le tracking serré */ } /* ========================================================= 3. LAYOUT (ex-dzcommunity.css) ========================================================= */ .community-layout { display: flex; gap: 20px; } .community-sidebar { flex: 0 0 30%; max-width: 30%; position: sticky; top: 90px; height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } .community-main-content { flex: 1; min-width: 0; } @media (max-width: 992px) { .community-layout { flex-direction: column; } .community-sidebar, .community-main-content { flex: none; width: 100%; max-width: 100%; } } /* --- Container tweaks (mobile-first) --- */ .container-fluid.community-layout { padding-left: 12px; padding-right: 12px; } @media (min-width: 768px) { .container-fluid.community-layout { padding-left: 2rem; padding-right: 2rem; } } .avatar-small { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; } /* --- ANTI-DÉBORDEMENT HORIZONTAL (mobile) --- Un enfant trop large (pub AdSense, iframe, embed, mot insécable…) rendait toute la page « décalée » et rognée à gauche (barre du bas comprise). `clip` stoppe le scroll horizontal SANS casser position:sticky (≠ hidden). Ce fichier n'étant chargé que sur les pages communauté, c'est bien scopé. */ @media (max-width: 991.98px) { html, body { overflow-x: clip; } } .community-main-content { max-width: 100%; } .community-main-content img, .community-main-content iframe, .community-main-content video, .community-main-content ins.adsbygoogle, .community-main-content .adsbygoogle { max-width: 100% !important; } /* ========================================================= 4. COMPOSANTS ========================================================= */ /* --- Cartes --- */ .card { border: none; background: var(--dz-bg-card); border-radius: var(--dz-radius-lg); box-shadow: var(--dz-shadow-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s; } .card-title { color: var(--dz-text-main); } .text-muted { color: var(--dz-text-muted) !important; } /* Effet de survol sur les cartes interactives */ .post-card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; } .post-card-hover:hover { transform: translateY(-2px); box-shadow: var(--dz-shadow-hover); } /* --- Boutons (pills) --- */ .btn { border-radius: var(--dz-radius-pill); padding: 0.5rem 1.25rem; font-weight: 500; font-size: 0.95rem; transition: all 0.2s; } .btn-primary { background-color: var(--dz-primary); border-color: var(--dz-primary); box-shadow: 0 2px 4px rgba(var(--dz-rgb-primary), 0.3); } .btn-primary:hover, .btn-primary:focus { background-color: var(--dz-primary-dark); border-color: var(--dz-primary-dark); transform: translateY(-1px); } /* Bouton fantôme (icônes / widget de création) */ .btn-ghost { background: transparent; border: none; color: var(--dz-text-muted); transition: background-color 0.2s, color 0.2s; } .btn-ghost:hover { background-color: rgba(var(--dz-rgb-primary), 0.1); color: var(--dz-primary); } .hover-underline:hover { text-decoration: underline !important; } /* --- Avatars --- */ .rounded-circle.border { border-color: #f1f5f9 !important; } /* --- Badges & flairs --- */ .badge { font-weight: 600; padding: 0.4em 0.8em; } /* --- Champs de formulaire --- */ .form-control { background-color: var(--dz-bg-subtle); border: 1px solid var(--dz-border); border-radius: var(--dz-radius-lg); } .form-control:focus { background-color: #fff; border-color: var(--dz-primary); box-shadow: 0 0 0 4px var(--dz-primary-soft); } /* --- Glassmorphism --- */ .glass-panel { background: var(--dz-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--dz-glass-border); } /* --- Sticky sub-header (recherche/filtres) --- */ .community-sub-header { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; } .community-sub-header.sticky-top { top: 65px; } @media (max-width: 768px) { .community-sub-header.sticky-top { top: 106px; } } /* --- Scroll horizontal snap (carrousels mobile) --- */ .horizontal-scroll-snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1rem; padding-bottom: 1rem; } .horizontal-scroll-snap > * { scroll-snap-align: start; flex: 0 0 85%; } @media (min-width: 768px) { .horizontal-scroll-snap > * { flex: 0 0 45%; } } /* --- Recherche en pill --- */ .community-main-content form[role="search"] { border-radius: var(--dz-radius-pill) !important; } /* --- Utilitaires --- */ .cursor-pointer { cursor: pointer; } .z-1020 { z-index: 1020; } /* ========================================================= 5. ANIMATIONS (alertes auto-fade) ========================================================= */ .fade-out-alert { animation: fadeOut 0.5s ease-in-out 2s forwards; } @keyframes fadeOut { from { opacity: 1; transform: scale(1); max-height: 100px; } to { opacity: 0; transform: scale(0.9); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border: none; overflow: hidden; } } /* ========================================================= 6. SIDEBAR DE NAVIGATION ========================================================= */ .sidebar-link { color: #495057; font-weight: 500; padding: 10px 16px; border-radius: var(--dz-radius-xl); transition: all 0.2s ease; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; } .sidebar-link:hover { background-color: var(--dz-bg-subtle); color: #000; text-decoration: none; } .sidebar-link.active { background-color: var(--dz-primary-soft); color: var(--dz-primary-dark); font-weight: 600; } .sidebar-link.active i { color: var(--dz-primary-dark); } .sidebar-divider { border-top: 1px solid var(--dz-border); opacity: 0.5; margin-left: 16px; margin-right: 16px; } /* Alignement gauche des libellés de sidebar (desktop + mobile) */ .community-sidebar h5, .community-sidebar h6, .community-sidebar span, .sidebar-inner h5, .sidebar-inner h6, .sidebar-inner span, .offcanvas-body h5, .offcanvas-body h6, .offcanvas-body span, .offcanvas-body { text-align: left !important; } /* Effet zoom sur badges de tendance */ .hover-scale { transition: transform 0.2s; } .hover-scale:hover { transform: scale(1.05); background-color: var(--dz-bg-subtle) !important; } /* ========================================================= 7. INDICATEURS HTMX ========================================================= */ .htmx-request { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; cursor: wait; } /* Optimistic UI : les widgets de vote ne se grisent PAS pendant la requête (le retour visuel est déjà appliqué côté client par dzcommunity.js). */ .js-vote-widget.htmx-request { opacity: 1 !important; pointer-events: auto; cursor: pointer; } .js-vote-widget.vote-pulse { animation: dzVotePulse 0.25s ease; } @keyframes dzVotePulse { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } } .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-block; } .htmx-request .btn-text { display: none; } /* ========================================================= 8. PROFILE TABS ========================================================= */ .profile-tabs .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--dz-text-muted); font-weight: 600; padding: 12px 20px; background: transparent; } .profile-tabs .nav-link:hover { color: #000; border-color: var(--dz-border); } .profile-tabs .nav-link.active { color: #000; border-bottom: 3px solid var(--dz-primary); background: transparent; } /* Bannière mobile */ @media (max-width: 576px) { .profile-cover { height: 100px !important; } .rounded-circle.border-4 { width: 80px !important; height: 80px !important; } body { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; } .floating-action-buttons, .fixed-bottom-buttons { bottom: 70px !important; } } /* ========================================================= 9. BANNIÈRE DE COMMUNAUTÉ + CARTES SUJETS ========================================================= */ .community-banner { height: 150px; background: linear-gradient(90deg, var(--dz-primary) 0%, var(--dz-primary-dark) 100%); } .community-banner.has-bg-image { background-image: var(--bg-image); background-position: center; background-size: cover; } .topic-card { transition: transform 0.2s ease; } .topic-card:hover { transform: scale(1.03); } .text-shadow { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .topic-gradient-1 { background: linear-gradient(135deg, #0E7C5A 0%, #000 150%); } .topic-gradient-2 { background: linear-gradient(135deg, #0d6efd 0%, #000 150%); } .topic-gradient-3 { background: linear-gradient(135deg, #198754 0%, #000 150%); } .topic-gradient-4 { background: linear-gradient(135deg, #fd7e14 0%, #000 150%); } .topic-gradient-5 { background: linear-gradient(135deg, #d63384 0%, #000 150%); } .topic-gradient-6 { background: linear-gradient(135deg, #20c997 0%, #000 150%); } /* ========================================================= 10. CARROUSEL ========================================================= */ .carousel-control-prev, .carousel-control-next { width: 5%; background-color: rgba(0, 0, 0, 0.3); } .carousel-control-prev:hover, .carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.6); } .carousel-indicators [data-bs-target] { background-color: #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: .8; } .carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(1) grayscale(100); } /* ========================================================= 10bis. BARRE D'ACTIONS DU POST (carte de feed) Uniformise la hauteur des contrôles (44px) pour éviter le décalage entre la pastille de vote et les boutons icônes. Scopé à .dz-post-actions → n'affecte PAS les votes de commentaires. ========================================================= */ .dz-post-actions .vote-widget-horizontal { height: 44px; } /* ========================================================= 11. COMPOSER (modal / bottom-sheet) — création 1 tap ========================================================= */ .dz-composer .modal-content { border: none; border-radius: var(--dz-radius-xl); box-shadow: var(--dz-shadow-hover); } .dz-composer .upload-dropzone { border: 2px dashed var(--dz-border); border-radius: var(--dz-radius-lg); background-color: var(--dz-bg-subtle); transition: all 0.2s ease; cursor: pointer; } .dz-composer .upload-dropzone:hover, .dz-composer .upload-dropzone.dragover { border-color: var(--dz-primary); background-color: rgba(var(--dz-rgb-primary), 0.05); } .dz-composer .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 12px; } .dz-composer .preview-item { position: relative; aspect-ratio: 1; border-radius: var(--dz-radius-md); overflow: hidden; border: 1px solid var(--dz-border); } .dz-composer .preview-item img { width: 100%; height: 100%; object-fit: cover; } /* Sur mobile, le composer devient un bottom-sheet qui remonte du bas */ @media (max-width: 575.98px) { .dz-composer .modal-dialog { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; max-width: 100%; } .dz-composer .modal-content { border-radius: var(--dz-radius-xl) var(--dz-radius-xl) 0 0; max-height: 92vh; } .dz-composer.fade .modal-dialog { transform: translateY(100%); transition: transform 0.3s ease-out; } .dz-composer.show .modal-dialog { transform: none; } } /* ========================================================= 12. DARK MODE ========================================================= */ [data-bs-theme="dark"] { --dz-bg-body: #0f172a; /* Slate 900 */ --dz-bg-card: #1e293b; /* Slate 800 */ --dz-bg-subtle: #1e293b; --dz-border: #334155; --dz-text-main: #f1f5f9; --dz-text-muted: #94a3b8; --dz-primary-soft: rgba(var(--dz-rgb-primary), 0.18); --dz-glass: rgba(30, 41, 59, 0.7); --dz-glass-border: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .sidebar-link { color: #cbd5e1; } [data-bs-theme="dark"] .sidebar-link:hover { color: #fff; } [data-bs-theme="dark"] .sidebar-link.active { color: #6ee7b7; } [data-bs-theme="dark"] .sidebar-link.active i { color: #6ee7b7; } [data-bs-theme="dark"] .community-sub-header { background: rgba(15, 23, 42, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(15px); } [data-bs-theme="dark"] .community-main-content form[role="search"] { background-color: #1e293b !important; border-color: #334155 !important; } [data-bs-theme="dark"] .community-main-content form[role="search"] input { color: #f1f5f9; } [data-bs-theme="dark"] .community-main-content form[role="search"] input::placeholder { color: #64748b; } [data-bs-theme="dark"] .btn-ghost.active, [data-bs-theme="dark"] .btn-ghost:active, [data-bs-theme="dark"] .nav-link.active { background-color: rgba(var(--dz-rgb-primary), 0.18) !important; color: #6ee7b7 !important; border: 1px solid rgba(var(--dz-rgb-primary), 0.3); } [data-bs-theme="dark"] .navbar .form-control { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f1f5f9 !important; } [data-bs-theme="dark"] .navbar .form-control::placeholder { color: rgba(255, 255, 255, 0.5) !important; } [data-bs-theme="dark"] .btn-outline-light.text-dark { color: #e4e6eb !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-bs-theme="dark"] .nav-pills .nav-link.active, [data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary { background-color: var(--dz-primary) !important; color: #fff !important; border: none; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } [data-bs-theme="dark"] .form-control:focus { background-color: #0f172a !important; border-color: var(--dz-primary) !important; box-shadow: 0 0 0 2px rgba(var(--dz-rgb-primary), 0.25) !important; } /* ========================================================= 13. BARRE DE NAVIGATION BASSE (MOBILE TAB BAR) Affichée uniquement sur mobile/tablette (< 992px). ========================================================= */ .dz-bottom-nav { display: none; } @media (max-width: 991.98px) { .dz-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; justify-content: space-around; align-items: stretch; background: var(--dz-bg-card); border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); transition: transform 0.3s ease-in-out; } body.nav-is-hidden .dz-bottom-nav { transform: translateY(100%); } .dz-bottom-nav .dz-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; color: var(--dz-text-muted); text-decoration: none; font-size: 0.68rem; font-weight: 600; transition: color 0.2s; background: transparent; border: none; } .dz-bottom-nav .dz-nav-item i { font-size: 1.3rem; line-height: 1; } .dz-bottom-nav .dz-nav-item.active { color: var(--dz-primary); } .dz-bottom-nav .dz-nav-item:active { transform: scale(0.92); } /* Bouton central "Créer" mis en avant */ .dz-bottom-nav .dz-nav-create i { background: var(--dz-primary); color: #fff; width: 48px; height: 48px; margin-top: -20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 3px solid var(--dz-bg-card); box-shadow: 0 4px 12px rgba(var(--dz-rgb-primary), 0.45); } /* Place sous le contenu pour ne rien masquer */ .community-layout { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; } } [data-bs-theme="dark"] .dz-bottom-nav { border-top-color: rgba(255, 255, 255, 0.08); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4); } /* ========================================================= 14. ESPACEMENT MOBILE + AUTO-HIDE DU HEADER ========================================================= */ @media (max-width: 768px) { .community-main-content { margin-top: 10px; } .sticky-top { top: 106px; } .offcanvas-start { top: 0 !important; } } /* Le header glisse hors écran au scroll vers le bas */ .navbar-glass.fixed-top, header.fixed-top { transition: transform 0.3s ease-in-out, top 0.3s ease-in-out; } .nav-up { transform: translateY(-100%) !important; } body.nav-is-hidden .sticky-top { top: 0 !important; transition: top 0.3s ease-in-out; }