/* ============================================================ Dopamine pass — backgrounds gradient subtils + cards accent ------------------------------------------------------------ Inclus globalement depuis includes/header.php. N'écrase rien : tout passe par un body[data-dop="1"] OU par une classe `.dop-page` posée sur le wrapper de page. ============================================================ */ /* Default canvas en gradient subtil — appliqué quand on annote le avec data-dop="1" depuis la page. */ body[data-dop="1"] { background: radial-gradient(ellipse 800px 400px at 20% 0%, rgba(42,124,250,0.08), transparent 60%), radial-gradient(ellipse 600px 300px at 90% 100%, rgba(139,92,246,0.06), transparent 60%), var(--gray-50, #f8fafc) !important; } /* Bannière hero bleue sur les pages de recherche principales (/services, /annonces-clients, /independants — toutes utilisent .services-page ou .announcements-page comme wrapper). */ body[data-dop="1"] .services-page, body[data-dop="1"] .announcements-page { padding-top: 0; } body[data-dop="1"] .services-page::before, body[data-dop="1"] .announcements-page::before { content: ''; display: block; height: 180px; background: radial-gradient(ellipse 700px 220px at 80% 100%, rgba(255,255,255,0.18), transparent 65%), linear-gradient(135deg, #1E5BBB 0%, #2A7CFA 55%, #4A9EFF 100%); margin-bottom: -120px; position: relative; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; box-shadow: 0 8px 24px rgba(42,124,250,0.22); } body[data-dop="1"] .services-page .container, body[data-dop="1"] .announcements-page .container { position: relative; padding-top: 28px; } @media (max-width: 640px) { body[data-dop="1"] .services-page::before, body[data-dop="1"] .announcements-page::before { height: 140px; margin-bottom: -90px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } } /* Quand le body est en mode dopamine, on rend transparent le bg des conteneurs principaux des pages internes pour laisser apparaître le gradient global au lieu du gris plat. */ body[data-dop="1"] .services-page, body[data-dop="1"] .announcements-page, body[data-dop="1"] .dashboard-layout, body[data-dop="1"] .my-services-page, body[data-dop="1"] .my-announcements-page, body[data-dop="1"] .my-orders-page, body[data-dop="1"] .orders-page, body[data-dop="1"] .order-detail-page, body[data-dop="1"] .leaderboard-page, body[data-dop="1"] .points-page, body[data-dop="1"] .settings-page, body[data-dop="1"] .favorites-page, body[data-dop="1"] .notifications-page, body[data-dop="1"] .profile-page, body[data-dop="1"] .freelancer-profile-page, body[data-dop="1"] .client-profile-page, body[data-dop="1"] .create-service-page, body[data-dop="1"] .create-announcement-page, body[data-dop="1"] .announcement-detail-page, body[data-dop="1"] .service-detail-page, body[data-dop="1"] .messages-page { background: transparent !important; } /* Wrapper de page (alternative à body[data-dop=1] si on ne veut pas toucher le body) */ .dop-page { padding: 24px 0 60px; background: radial-gradient(ellipse 800px 400px at 20% 0%, rgba(42,124,250,0.08), transparent 60%), radial-gradient(ellipse 600px 300px at 90% 100%, rgba(139,92,246,0.06), transparent 60%), var(--gray-50, #f8fafc); min-height: calc(100vh - 200px); } /* Carte d'entête (h1 + sous-titre + CTA droit) avec hairline 3-colors */ .dop-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; padding: 22px 24px; background: white; border: 1px solid var(--gray-200, #e2e8f0); border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); position: relative; overflow: hidden; } .dop-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2A7CFA 0%, #8B5CF6 50%, #F472B6 100%); z-index: 1; } .dop-header > * { position: relative; z-index: 2; } .dop-header h1 { display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; color: var(--secondary, #0F172A); margin: 0; line-height: 1.2; } .dop-header h1 i[data-lucide], .dop-header h1 .icon-chip { padding: 8px; background: linear-gradient(135deg, #DBEAFE, #C7D2FE); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary, #2A7CFA); width: 38px; height: 38px; } .dop-header p { color: var(--gray-600, #475569); margin: 6px 0 0; font-size: 13.5px; } .dop-header p strong { color: var(--primary, #2A7CFA); font-size: 16px; } .dop-header .header-actions, .dop-header .header-cta { display: flex; gap: 10px; flex-wrap: wrap; } /* Card générique (sections, listes...) */ .dop-card { background: white; border: 1px solid var(--gray-200, #e2e8f0); border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); transition: box-shadow .15s, transform .15s; } .dop-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,0.06); } /* Stat tile (utilisé pour les dashboards + profil) */ .dop-stat-tile { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: white; border: 1px solid var(--gray-200, #e2e8f0); transition: transform .15s, box-shadow .15s; } .dop-stat-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(15,23,42,0.06); } .dop-stat-tile .icon-bg { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: white; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .dop-stat-tile .icon-bg.blue { background: #3B82F6; } .dop-stat-tile .icon-bg.green { background: #10B981; } .dop-stat-tile .icon-bg.orange { background: #F97316; } .dop-stat-tile .icon-bg.violet { background: #8B5CF6; } .dop-stat-tile .icon-bg.pink { background: #F472B6; } .dop-stat-tile .icon-bg.amber { background: #F59E0B; } .dop-stat-tile .stat-num { display: block; font-size: 22px; font-weight: 800; color: var(--secondary, #0F172A); line-height: 1.1; } .dop-stat-tile .stat-label { display: block; font-size: 11.5px; color: var(--gray-500, #64748B); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; margin-top: 2px; } /* Background helpers pour les stat icons spécifiques */ .bg-tile-budget { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); border-color: #A7F3D0; } .bg-tile-deadline { background: linear-gradient(135deg, #FFF7ED, #FED7AA); border-color: #FDBA74; } .bg-tile-views { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-color: #BFDBFE; } .bg-tile-orders { background: linear-gradient(135deg, #FAF5FF, #E9D5FF); border-color: #D8B4FE; } .bg-tile-points { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-color: #FCD34D; } .bg-tile-reviews { background: linear-gradient(135deg, #FFF1F2, #FECDD3); border-color: #FDA4AF; } /* ============================================================ Browse toggle (pill tabs) — utilisé sur /services, /independants, /annonces, etc. pour basculer entre catalogues ============================================================ */ .browse-toggle-wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .browse-toggle { display: inline-flex; background: var(--gray-100, #f1f5f9); border-radius: 12px; padding: 4px; gap: 2px; flex: 0 0 auto; } .browse-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--gray-600, #475569); transition: all .15s; white-space: nowrap; } .browse-toggle-btn:hover { color: var(--gray-900, #0F172A); } .browse-toggle-btn.active { background: white; color: var(--primary, #2A7CFA); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } @media (max-width: 640px) { .browse-toggle { width: 100%; display: flex; } .browse-toggle-btn { flex: 1 1 50%; justify-content: center; padding: 8px 8px; font-size: 12px; } } /* Mobile spacing */ @media (max-width: 640px) { .dop-page { padding: 16px 0 40px; } .dop-header { padding: 16px 18px; flex-direction: column; align-items: flex-start; } .dop-header .header-actions, .dop-header .header-cta { width: 100%; } } /* ============================================================ Clickable cards — toute carte avec [data-card-link] devient entièrement cliquable. Les liens/boutons internes restent prioritaires (z-index + .no-card-click si besoin de bloquer). Le pattern est wiré par assets/js/card-click.js (loadé global). ============================================================ */ [data-card-link] { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } [data-card-link]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } [data-card-link] a, [data-card-link] button, [data-card-link] input, [data-card-link] select, [data-card-link] textarea, [data-card-link] label { position: relative; z-index: 2; /* éviter que le click handler de carte intercepte */ } [data-card-link]:focus-visible { outline: 2px solid var(--primary, #2563EB); outline-offset: 3px; }