/*
* FIXEO — Artisan Card Conversion v1
* Uber-level UX upgrade. CSS-only overrides on top of artisan-card-premium-v2.css.
* Loaded LAST → wins all specificity ties.
* No structural changes. Pure override layer.
*
* CHANGES:
* 1. Entire card is the CTA (cursor, pointer, active feedback)
* 2. Availability badge inline with name (not absolute top-right)
* 3. Noise hidden: divider, badges-v2, "Profil à revendiquer"
* 4. Rating block bigger + bolder
* 5. Price: "150 MAD" dominant, "/ intervention" quiet below
* 6. Single CTA: "Réserver" full-weight + profile as text link below
* 7. FOMO line styled
* 8. Mobile: card active feedback, counter strip above grid
* 9. Micro-interactions: hover translateY(-6px), active scale(0.98)
*/
/* ═══════════════════════════════════════════════════════════════
1. CARD = THE CTA
═══════════════════════════════════════════════════════════════ */
.pvc-card {
cursor: pointer !important;
user-select: none !important;
}
.pvc-card:hover {
transform: translateY(-6px) scale(1.01) !important;
border-color: rgba(225,48,108,0.40) !important;
box-shadow:
0 18px 56px rgba(225,48,108,0.20),
0 4px 16px rgba(0,0,0,0.40) !important;
}
.pvc-card:active {
transform: scale(0.98) translateY(0) !important;
transition: transform 0.1s ease !important;
}
.pvc-card--real:hover {
border-color: rgba(32,201,151,0.45) !important;
box-shadow:
0 18px 56px rgba(32,201,151,0.16),
0 4px 16px rgba(0,0,0,0.40) !important;
}
/* ═══════════════════════════════════════════════════════════════
2. AVAILABILITY BADGE — inline with name, not absolute
═══════════════════════════════════════════════════════════════ */
/* Old absolute badge: hide it (it's now rendered inside .pvc-meta-row) */
.pvc-avail-badge {
position: static !important;
top: auto !important;
right: auto !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 20px !important;
white-space: nowrap !important;
}
.pvc-avail-badge--on {
background: rgba(32,201,151,0.18) !important;
color: #20c997 !important;
border: 1px solid rgba(32,201,151,0.32) !important;
}
.pvc-avail-badge--today {
background: rgba(255,165,2,0.14) !important;
color: #ffa502 !important;
border: 1px solid rgba(255,165,2,0.28) !important;
}
.pvc-avail-badge--off {
background: rgba(255,255,255,0.05) !important;
color: rgba(255,255,255,0.36) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
/* Meta row: flex wrap so badge sits next to cat pill */
.pvc-meta-row {
display: flex !important;
align-items: center !important;
gap: 5px !important;
flex-wrap: wrap !important;
margin-top: 4px !important;
}
/* City pill: quieter — move to after availability */
.pvc-city-pill {
font-size: 0.70rem !important;
color: rgba(255,255,255,0.42) !important;
}
/* ═══════════════════════════════════════════════════════════════
3. NOISE REDUCTION
═══════════════════════════════════════════════════════════════ */
/* Divider: invisible (removed from template, but keep style silent) */
.pvc-divider {
display: none !important;
}
/* Badges row: hidden (claim badge hurts conversion) */
.pvc-badges-v2 {
display: none !important;
}
/* Info chips: keep but quieter */
.pvc-info-bar {
margin-top: 6px !important;
padding: 0 16px !important;
}
.pvc-info-chip {
font-size: 0.68rem !important;
opacity: 0.75 !important;
}
/* ═══════════════════════════════════════════════════════════════
4. RATING BLOCK — bigger, bolder
═══════════════════════════════════════════════════════════════ */
.pvc-stats {
padding: 12px 16px 0 !important;
}
.pvc-stars-v2 {
font-size: 1.02rem !important;
letter-spacing: 1.5px !important;
}
.pvc-rating-num {
font-size: 1.02rem !important;
font-weight: 800 !important;
color: #fff !important;
}
.pvc-reviews-count {
font-size: 0.74rem !important;
color: rgba(255,255,255,0.45) !important;
}
/* ═══════════════════════════════════════════════════════════════
5. PRICE — dominant number, quiet label below
═══════════════════════════════════════════════════════════════ */
.pvc-price-block {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
.pvc-price-amount {
font-size: 1.55rem !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1.05 !important;
order: 1 !important;
}
.pvc-price-amount .price-currency {
font-size: 0.80rem !important;
font-weight: 700 !important;
color: rgba(255,255,255,0.60) !important;
vertical-align: super !important;
margin-left: 2px !important;
line-height: 0 !important;
}
/* "/ intervention" — replaces old "À partir de" label */
.pvc-price-from {
font-size: 0.66rem !important;
color: rgba(255,255,255,0.40) !important;
font-weight: 400 !important;
order: 2 !important;
line-height: 1.2 !important;
}
/* ═══════════════════════════════════════════════════════════════
6. SINGLE CTA — "Réserver" primary + profile text link below
═══════════════════════════════════════════════════════════════ */
/* Vertical stack: button on top, profile link below */
.pvc-cta-col {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 5px !important;
flex-shrink: 0 !important;
}
/* Primary CTA — stronger, no calendar emoji (handled in JS) */
.pvc-btn-reserve-v2 {
padding: 11px 20px !important;
border-radius: 12px !important;
font-size: 0.86rem !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #E1306C, #833AB4) !important;
color: #fff !important;
border: none !important;
cursor: pointer !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
box-shadow: 0 8px 22px rgba(225,48,108,0.30) !important;
transition: all 0.18s ease !important;
}
.pvc-btn-reserve-v2:hover {
transform: scale(1.03) translateY(-1px) !important;
box-shadow: 0 14px 32px rgba(225,48,108,0.40) !important;
}
.pvc-btn-reserve-v2:active {
transform: scale(0.98) !important;
box-shadow: 0 4px 12px rgba(225,48,108,0.22) !important;
}
/* Profile text link — low priority, no button frame */
.pvc-profile-link {
font-size: 0.70rem !important;
color: rgba(255,255,255,0.40) !important;
cursor: pointer !important;
text-decoration: none !important;
padding: 2px 4px !important;
border-radius: 4px !important;
transition: color 0.15s !important;
white-space: nowrap !important;
user-select: none !important;
display: block !important;
text-align: right !important;
}
.pvc-profile-link:hover {
color: rgba(255,255,255,0.75) !important;
}
/* Footer layout: price left, CTA right */
.pvc-footer {
padding: 14px 16px 16px !important;
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 10px !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
margin-top: auto !important;
}
/* ═══════════════════════════════════════════════════════════════
7. FOMO LINE
═══════════════════════════════════════════════════════════════ */
.pvc-fomo-line {
font-size: 0.70rem !important;
color: #ffb86b !important;
font-weight: 600 !important;
padding: 6px 16px 0 !important;
opacity: 0.82 !important;
letter-spacing: 0.01em !important;
}
/* ═══════════════════════════════════════════════════════════════
8. MOBILE COUNTER STRIP (above vedette grid)
═══════════════════════════════════════════════════════════════ */
.pvc-grid-counter {
font-size: 0.78rem !important;
color: rgba(255,255,255,0.45) !important;
padding: 0 16px 8px !important;
letter-spacing: 0.01em !important;
display: none !important; /* shown only on mobile via media query */
}
@media (max-width: 640px) {
.pvc-grid-counter {
display: block !important;
}
/* Card tap feedback — stronger on mobile */
.pvc-card:active {
transform: scale(0.97) !important;
transition: transform 0.08s ease !important;
}
/* Mobile button: full-width feel inside card */
.pvc-btn-reserve-v2 {
padding: 10px 16px !important;
font-size: 0.82rem !important;
}
/* Mobile: bigger availability badge text */
.pvc-avail-badge {
font-size: 0.68rem !important;
}
/* Mobile: rating row slightly smaller */
.pvc-stars-v2, .pvc-rating-num {
font-size: 0.92rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FIXEO AVATAR UPGRADE v2 (Tasks 1–3)
Silhouette SVG + service icon badge
Replaces initials — CSS only
═══════════════════════════════════════════════════════════════ */
/* Avatar wrapper: dark premium bg replaces gradient-with-letter */
.pvc-avatar {
position: relative !important;
background: linear-gradient(135deg, #1a1a2a, #2a2a3e) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important; /* badge overflows corner */
}
/* Silhouette SVG — centered, 60% of avatar */
.pvc-avatar-svg {
width: 60% !important;
height: 60% !important;
fill: rgba(255,255,255,0.75) !important;
display: block !important;
flex-shrink: 0 !important;
margin: auto !important;
}
/* Real photo: keep circular fill */
.pvc-avatar-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: inherit !important;
display: block !important;
}
/* Service icon badge — bottom-right corner */
.pvc-avatar-badge {
position: absolute !important;
bottom: -4px !important;
right: -4px !important;
width: 22px !important;
height: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
line-height: 1 !important;
background: rgba(10,10,20,0.80) !important;
border: 1px solid rgba(255,255,255,0.20) !important;
border-radius: 50% !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.40) !important;
z-index: 4 !important;
pointer-events: none !important;
}
/* Mobile: slightly smaller badge */
@media (max-width: 640px) {
.pvc-avatar-badge {
width: 20px !important;
height: 20px !important;
font-size: 10px !important;
bottom: -3px !important;
right: -3px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FIXEO PRICE LABEL UPGRADE (Task 4)
"💡 Prix conseillé Fixeo" — gold, stronger signal
═══════════════════════════════════════════════════════════════ */
.pvc-price-from {
font-size: 0.69rem !important;
color: #ffd166 !important;
font-weight: 600 !important;
opacity: 0.88 !important;
order: 2 !important;
line-height: 1.3 !important;
letter-spacing: 0.005em !important;
}
/* ═══════════════════════════════════════════════════════════════
BADGE CLEANUP (Task 5+6)
Claim/revendiqué removed from JS template.
pvc-badges-v2 stays hidden (display:none from prior rule).
If future code re-shows it, only --verified and --premium are safe.
═══════════════════════════════════════════════════════════════ */
/* Defensive: always hide claim badges even if template ever re-adds them */
.pvc-badge-v2--claim {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
FINAL UX POLISH — v3 (Tasks 1–6)
Appended block — wins all prior rules in same file
═══════════════════════════════════════════════════════════════ */
/* ── Task 1: defensive — hide any claim/real badges (belt+suspenders) ── */
.pvc-badge-v2--claim,
.pvc-badge-v2--real {
display: none !important;
}
/* ── Task 2: meta-row — avail badge always right-aligned, no overlap ── */
.pvc-meta-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.pvc-avail-badge {
position: static !important;
margin-left: auto !important;
white-space: nowrap !important;
}
/* ── Task 3: initials kill-switch (defensive — already removed from JS) ── */
.pvc-avatar-initials {
display: none !important;
}
/* ── Task 4: price — dominant amount + strong Fixeo label ── */
.pvc-price-amount {
font-size: 1.70rem !important;
font-weight: 900 !important;
color: #fff !important;
line-height: 1.0 !important;
order: 1 !important;
}
.pvc-price-from {
font-size: 0.72rem !important;
color: #ffd166 !important;
font-weight: 600 !important;
opacity: 1 !important;
margin-top: 4px !important;
order: 2 !important;
line-height: 1.3 !important;
}
.pvc-price-hint {
color: rgba(255,255,255,0.65) !important;
font-size: 0.72rem !important;
}
/* ── Task 5: CTA — always visible, strong gradient ── */
.pvc-btn-reserve-v2 {
background: linear-gradient(135deg, #ff4d8d, #a855f7) !important;
color: #fff !important;
font-weight: 700 !important;
opacity: 1 !important;
}
.pvc-btn-reserve-v2:hover {
transform: scale(1.03) !important;
opacity: 1 !important;
}
/* ── Task 6: card micro-interaction ── */
.pvc-card {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.pvc-card:hover {
transform: translateY(-4px) !important;
}
/* Mobile: no hover effects (touch devices) */
@media (max-width: 640px) {
.pvc-avail-badge {
margin-left: 0 !important; /* wraps below on small screens */
}
.pvc-price-amount {
font-size: 1.50rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FINAL CLEANUP PASS — v4
Fix avatar visibility, price clarity, badge/overlap, CTA
═══════════════════════════════════════════════════════════════ */
/* ── T1: avatar icon — large centered emoji replaces SVG silhouette ── */
.pvc-avatar-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
font-size: 1.55rem !important;
line-height: 1 !important;
position: static !important;
}
/* Hide SVG silhouette fallback (previous approach — fully replaced) */
.pvc-avatar-svg,
.pvc-avatar-silhouette {
display: none !important;
}
/* Avatar: dark bg + overflow visible for badge bleed */
.pvc-avatar {
overflow: visible !important;
background: linear-gradient(135deg, #1a1a2a 0%, #2c2040 100%) !important;
}
/* Avatar badge: service icon pill — keep but smaller (emoji already in main circle) */
.pvc-avatar-badge {
width: 18px !important;
height: 18px !important;
font-size: 9px !important;
bottom: -3px !important;
right: -3px !important;
opacity: 0 !important; /* hide redundant badge — icon already in avatar body */
}
/* ── T2: meta-row — availability badge right-aligned, no overlap ── */
.pvc-meta-row {
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
overflow: hidden !important;
}
.pvc-cat-pill {
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.pvc-city-pill {
display: inline-flex !important; /* T3: city restored — visible but subtle */
}
.pvc-avail-badge {
flex-shrink: 0 !important;
margin-left: auto !important;
white-space: nowrap !important;
position: static !important;
}
/* ── T2+: "Profil réel" / pvc-badge-v2--real — belt-and-suspenders ── */
.pvc-badge-v2--real,
.pvc-badge-v2--claim,
[class*="badge-real"],
[class*="badge-claim"] {
display: none !important;
}
/* ── T3: price block — clear hierarchy ── */
.pvc-price-block {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.pvc-price-amount {
font-size: 1.65rem !important;
font-weight: 900 !important;
line-height: 1.0 !important;
order: 1 !important;
}
.pvc-price-from {
font-size: 0.72rem !important;
color: #ffd166 !important;
font-weight: 600 !important;
opacity: 1 !important;
letter-spacing: 0 !important;
order: 2 !important;
}
/* ── T4: profile link — clear visual separation from CTA ── */
.pvc-profile-link {
font-size: 0.69rem !important;
color: rgba(255,255,255,0.38) !important;
margin-top: 4px !important;
display: block !important;
text-align: center !important;
cursor: pointer !important;
text-decoration: underline !important;
text-decoration-color: rgba(255,255,255,0.18) !important;
text-underline-offset: 2px !important;
}
.pvc-profile-link:hover {
color: rgba(255,255,255,0.65) !important;
}
/* ── T5: CTA — "Réserver maintenant" — always dominant ── */
.pvc-btn-reserve-v2 {
background: linear-gradient(135deg, #e1306c 0%, #833ab4 100%) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 0.84rem !important;
padding: 11px 18px !important;
border-radius: 12px !important;
opacity: 1 !important;
white-space: nowrap !important;
letter-spacing: 0.01em !important;
}
.pvc-btn-reserve-v2:hover {
background: linear-gradient(135deg, #f0206c 0%, #9b4dca 100%) !important;
transform: scale(1.03) translateY(-1px) !important;
box-shadow: 0 12px 28px rgba(225, 48, 108, 0.42) !important;
}
/* Mobile ── */
@media (max-width: 640px) {
.pvc-avatar-icon { font-size: 1.35rem !important; }
.pvc-price-amount { font-size: 1.45rem !important; }
.pvc-btn-reserve-v2 {
padding: 10px 14px !important;
font-size: 0.80rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FIX REAL RENDERER — v5 (fhp-card targets)
Scope: #fixeo-homepage-vedette-grid .pvc-card
Tasks T6 (mobile footer) + T7 (profile link style)
═══════════════════════════════════════════════════════════════ */
/* ── T7: profile link — text link style ── */
.pvc-profile-link {
display: inline-block !important;
color: rgba(255,255,255,0.72) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
text-decoration: underline !important;
text-decoration-color: rgba(255,255,255,0.30) !important;
text-underline-offset: 2px !important;
cursor: pointer !important;
user-select: none !important;
padding: 2px 0 !important;
opacity: 1 !important;
}
.pvc-profile-link:hover {
color: #fff !important;
text-decoration-color: rgba(255,255,255,0.65) !important;
}
/* ── T6: mobile footer — clean vertical layout ── */
@media (max-width: 640px) {
.pvc-footer {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.pvc-price-block {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
/* Hide market range hint on mobile — too noisy in small card */
.pvc-price-hint {
display: none !important;
}
.pvc-cta-col {
width: 100% !important;
align-items: stretch !important;
}
.pvc-cta-row {
width: 100% !important;
flex-direction: column !important;
gap: 8px !important;
}
.pvc-btn-reserve-v2 {
width: 100% !important;
text-align: center !important;
}
.pvc-profile-link {
display: block !important;
text-align: center !important;
margin-top: 4px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
UBER PREMIUM PASS — v6
Tasks T2 (silhouette system) + T3 (category gradients)
T6 (price CSS) + T7 (profile link) + T8 (mobile footer)
Scoped to real renderer: #fixeo-homepage-vedette-grid .fhp-card
Loads LAST → wins all specificity ties
═══════════════════════════════════════════════════════════════ */
/* ── T2: Silhouette system — pvc-avatar-silhouette pseudo-elements ── */
/* Kill emoji/icon approach — silhouette replaces it */
.fhp-card .pvc-avatar-icon {
display: none !important;
}
/* Silhouette span itself */
.pvc-avatar-silhouette {
display: block !important;
position: relative !important;
width: 62% !important;
height: 62% !important;
pointer-events: none !important;
}
/* Head circle */
.pvc-avatar-silhouette::before {
content: "" !important;
position: absolute !important;
top: 8% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 38% !important;
height: 38% !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.90) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
}
/* Body/shoulders */
.pvc-avatar-silhouette::after {
content: "" !important;
position: absolute !important;
bottom: 4% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 74% !important;
height: 42% !important;
border-radius: 999px 999px 22px 22px !important;
background: rgba(255,255,255,0.78) !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.16) !important;
}
/* Avatar container base — override overflow:visible so silhouette is clipped cleanly */
.fhp-card .pvc-avatar {
overflow: hidden !important;
border-radius: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
/* ── T3: Category-specific gradients on .pvc-avatar[data-category] ── */
.pvc-avatar[data-category="plomberie"] {
background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}
.pvc-avatar[data-category="electricite"] {
background: linear-gradient(135deg, #facc15, #f97316) !important;
}
.pvc-avatar[data-category="climatisation"] {
background: linear-gradient(135deg, #22d3ee, #06b6d4) !important;
}
.pvc-avatar[data-category="peinture"] {
background: linear-gradient(135deg, #f472b6, #ec4899) !important;
}
.pvc-avatar[data-category="nettoyage"] {
background: linear-gradient(135deg, #34d399, #10b981) !important;
}
.pvc-avatar[data-category="menuiserie"] {
background: linear-gradient(135deg, #a16207, #78350f) !important;
}
.pvc-avatar[data-category="serrurerie"] {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.pvc-avatar[data-category="maconnerie"] {
background: linear-gradient(135deg, #6b7280, #374151) !important;
}
.pvc-avatar[data-category="jardinage"] {
background: linear-gradient(135deg, #84cc16, #16a34a) !important;
}
.pvc-avatar[data-category="bricolage"] {
background: linear-gradient(135deg, #f97316, #ea580c) !important;
}
.pvc-avatar[data-category="demenagement"] {
background: linear-gradient(135deg, #c084fc, #7c3aed) !important;
}
.pvc-avatar[data-category="carrelage"] {
background: linear-gradient(135deg, #94a3b8, #475569) !important;
}
.pvc-avatar[data-category="toiture"] {
background: linear-gradient(135deg, #ef4444, #991b1b) !important;
}
.pvc-avatar[data-category="vitrerie"] {
background: linear-gradient(135deg, #38bdf8, #0369a1) !important;
}
.pvc-avatar[data-category="chauffage"] {
background: linear-gradient(135deg, #fb923c, #dc2626) !important;
}
/* ── T6: Price CSS — dominant amount + subtle Fixeo hint ── */
.pvc-price-amount {
font-size: 1.75rem !important;
font-weight: 900 !important;
color: #fff !important;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
}
.pvc-price-from {
color: #ffd166 !important;
font-weight: 700 !important;
font-size: 0.76rem !important;
opacity: 1 !important;
margin-top: 4px !important;
display: block !important;
}
.pvc-price-hint {
color: rgba(255,255,255,0.58) !important;
font-size: 0.72rem !important;
margin-top: 2px !important;
}
/* Hide the old nested hint sub-divs (only the simplified span is now rendered) */
.pvc-price-hint-market {
display: none !important;
}
.pvc-price-hint-rec {
display: none !important;
}
/* ── T7: Profile link — low-priority text link ── */
.pvc-profile-link {
display: inline-block !important;
color: rgba(255,255,255,0.62) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
text-decoration: underline !important;
text-decoration-color: rgba(255,255,255,0.28) !important;
text-underline-offset: 2px !important;
cursor: pointer !important;
user-select: none !important;
padding: 2px 4px !important;
opacity: 1 !important;
background: none !important;
border: none !important;
}
.pvc-profile-link:hover {
color: #fff !important;
text-decoration-color: rgba(255,255,255,0.65) !important;
}
/* ── T8: Mobile footer — clean vertical layout ── */
@media (max-width: 640px) {
.pvc-footer {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.pvc-price-block {
width: 100% !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
}
/* Already display:none globally — reinforce for mobile */
.pvc-price-hint {
display: none !important;
}
.pvc-cta-col {
width: 100% !important;
align-items: stretch !important;
}
.pvc-cta-row {
width: 100% !important;
flex-direction: column !important;
gap: 8px !important;
}
.pvc-btn-reserve-v2 {
width: 100% !important;
text-align: center !important;
}
.pvc-profile-link {
display: block !important;
text-align: center !important;
margin-top: 8px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FINAL POLISH — v7 (micro UX + perception boost)
Tasks T1(CSS) T2 T3 T4 T5 T6 T7
Real renderer: #fixeo-homepage-vedette-grid .fhp-card
═══════════════════════════════════════════════════════════════ */
/* ── T1: Price clarity — "Dès" style ── */
.pvc-price-amount {
font-size: 1.75rem !important;
font-weight: 900 !important;
color: #fff !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
}
/* "Dès" prefix (rendered inline) + currency */
.pvc-price-amount .price-currency {
font-size: 0.90rem !important;
font-weight: 700 !important;
opacity: 0.80 !important;
margin-left: 3px !important;
vertical-align: middle !important;
}
/* ── T2: Avatar service badge (bottom-right icon) ── */
/* Re-allow overflow:visible on the avatar container so badge bleeds out */
.fhp-card .pvc-avatar {
overflow: visible !important;
border-radius: 16px !important;
}
/* Clip only the silhouette content, not the badge */
.fhp-card .pvc-avatar > .pvc-avatar-silhouette,
.fhp-card .pvc-avatar > .pvc-avatar-img {
border-radius: 16px !important;
overflow: hidden !important;
}
.pvc-avatar-badge {
position: absolute !important;
bottom: -4px !important;
right: -4px !important;
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: rgba(0,0,0,0.85) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
border: 1.5px solid rgba(255,255,255,0.18) !important;
z-index: 4 !important;
pointer-events: none !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.40) !important;
}
/* ── T3: Reduce noise — secondary signals lighter ── */
.pvc-info-chip {
opacity: 0.65 !important;
font-size: 0.70rem !important;
}
.pvc-fomo {
opacity: 0.65 !important;
font-size: 0.70rem !important;
}
.pvc-trust-line {
opacity: 0.65 !important;
font-size: 0.70rem !important;
}
/* ── T4: Compact spacing ── */
.pvc-card .pvc-body {
gap: 8px !important;
}
.pvc-rating-row,
.pvc-stats {
margin-top: 4px !important;
}
/* ── T5: CTA premium depth ── */
.pvc-btn-reserve-v2 {
box-shadow: 0 10px 30px rgba(255,77,141,0.35) !important;
}
.pvc-btn-reserve-v2:hover {
transform: translateY(-2px) scale(1.01) !important;
box-shadow: 0 14px 36px rgba(255,77,141,0.48) !important;
}
/* ── T6: Card hover — desktop only ── */
@media (min-width: 641px) {
.pvc-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 25px 60px rgba(0,0,0,0.50) !important;
}
}
/* ── T7: Subtle footer divider ── */
.pvc-footer {
border-top: 1px solid rgba(255,255,255,0.05) !important;
padding-top: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════
UBER FINAL POLISH — v8
CSS-only. No JS touched. No layout broken.
Real renderer: #fixeo-homepage-vedette-grid .fhp-card
All rules appended — loads last → wins all specificity ties
═══════════════════════════════════════════════════════════════ */
/* ── T1: Visual noise reduction ── */
.pvc-info-chip {
opacity: 0.45 !important;
}
.pvc-trust-line {
opacity: 0.45 !important;
font-size: 0.68rem !important;
}
.pvc-fomo {
opacity: 0.75 !important;
font-size: 0.70rem !important;
}
/* ── T2a: Avatar shadow depth ── */
.fhp-card .pvc-avatar {
box-shadow:
0 0 0 2px rgba(255,255,255,0.04),
0 10px 30px rgba(0,0,0,0.50),
0 0 25px rgba(255,255,255,0.05) !important;
overflow: visible !important; /* badge must bleed */
border-radius: 16px !important;
}
/* ── T2b: Badge — kill old opacity:0 override + increase size ──
The old v2 pass at ~L486 set opacity:0 !important.
We appended after it → this wins. ── */
.pvc-avatar-badge {
width: 28px !important;
height: 28px !important;
font-size: 14px !important;
opacity: 1 !important; /* restore: kill the old opacity:0 */
bottom: -5px !important;
right: -5px !important;
position: absolute !important;
z-index: 10 !important;
background: rgba(0,0,0,0.85) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1.5px solid rgba(255,255,255,0.20) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
pointer-events: none !important;
}
/* ── T3: CTA column layout on desktop (unify with mobile) ── */
.pvc-cta-row {
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
/* Reserve button full-width in column layout */
.pvc-btn-reserve-v2 {
width: 100% !important;
text-align: center !important;
}
/* Profile link centered when stacked */
.pvc-profile-link {
text-align: center !important;
display: block !important;
}
/* ── T4: Footer gap breathing room ── */
.pvc-footer {
gap: 10px !important;
}
/* ── T5: Body density — compact but not cramped ── */
.pvc-card .pvc-body {
gap: 6px !important;
}
/* ── T6: Desktop hover — premium controlled motion ── */
@media (min-width: 641px) {
.pvc-card:hover {
transform: translateY(-8px) scale(1.01) !important;
box-shadow:
0 28px 64px rgba(0,0,0,0.55),
0 0 0 1px rgba(225,48,108,0.18) !important;
}
}
/* ── T7: Click feedback — tactile active state ── */
.pvc-card:active {
transform: scale(0.99) !important;
transition: transform 0.08s ease !important;
}
/* ═══════════════════════════════════════════════════════════════
WOW LEVEL POLISH — v9 (Apple / Stripe / Uber perception)
CSS-only. No JS. No HTML. No other sections.
Real renderer: #fixeo-homepage-vedette-grid .fhp-card
All rules appended — loads last → wins all specificity ties
═══════════════════════════════════════════════════════════════ */
/* ── T1: CTA magnet effect ── */
.pvc-btn-reserve-v2 {
box-shadow:
0 14px 38px rgba(255,77,141,0.45),
0 0 22px rgba(168,85,247,0.32) !important;
}
.pvc-btn-reserve-v2:hover {
transform: translateY(-2px) scale(1.012) !important;
box-shadow:
0 20px 52px rgba(255,77,141,0.58),
0 0 34px rgba(168,85,247,0.46) !important;
}
/* ── T2: Price impact ── */
.pvc-price-amount {
font-size: 1.85rem !important;
font-weight: 950 !important;
letter-spacing: -0.04em !important;
}
.pvc-price-from {
font-size: 0.78rem !important;
opacity: 1 !important;
}
/* ── T3: Avatar signature depth ── */
.fhp-card .pvc-avatar {
box-shadow:
0 0 0 2px rgba(255,255,255,0.05),
0 12px 32px rgba(0,0,0,0.52),
0 0 34px rgba(255,255,255,0.08) !important;
}
.pvc-avatar-badge {
box-shadow:
0 6px 16px rgba(0,0,0,0.35),
0 0 12px rgba(255,255,255,0.10) !important;
}
/* ── T4: Availability boost ── */
.pvc-avail-badge {
font-weight: 700 !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.08),
0 0 14px rgba(0,255,120,0.24) !important;
}
/* ── T5: Card glass depth ── */
.pvc-card {
background:
radial-gradient(circle at 18% 0%, rgba(255,255,255,0.055), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)) !important;
border: 1px solid rgba(255,255,255,0.095) !important;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease,
background 0.25s ease !important;
}
@media (min-width: 641px) {
.pvc-card:hover {
transform: translateY(-8px) scale(1.012) !important;
border-color: rgba(255,255,255,0.16) !important;
box-shadow:
0 32px 74px rgba(0,0,0,0.55),
0 0 48px rgba(225,48,108,0.13) !important;
}
}
/* ── T6: Tap feedback ── */
.pvc-card:active {
transform: scale(0.99) !important;
}
.pvc-btn-reserve-v2:active {
transform: scale(0.985) !important;
}
/* ── T7: Mobile safety ── */
@media (max-width: 640px) {
.pvc-price-amount {
font-size: 1.72rem !important;
}
.pvc-btn-reserve-v2 {
box-shadow:
0 12px 34px rgba(255,77,141,0.42),
0 0 20px rgba(168,85,247,0.28) !important;
}
.pvc-card:hover {
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════
LAUNCH CLEAN UI — v10 (minimal CSS for new template classes)
Supports T1 (pvc-rating-state) + T2 (chip-trust)
No layout changes. No structural changes.
═══════════════════════════════════════════════════════════════ */
/* T1: Rating state label — replaces numeric rating/reviews */
.pvc-rating-state {
font-size: 0.72rem !important;
color: rgba(255,255,255,0.55) !important;
font-style: italic !important;
font-weight: 400 !important;
margin-left: 6px !important;
}
/* T2: Trust chip — replaces mission count */
.pvc-info-chip.chip-trust {
background: rgba(255,255,255,0.07) !important;
color: rgba(255,255,255,0.72) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
}
/* ═══════════════════════════════════════════════════════════════
PRE-LAUNCH MICRO-FIXES — v11
T1: reinforce badge kill T2: CTA stretch T3: chip-trust boost
CSS-only. No JS. No HTML. No layout change. No regression.
═══════════════════════════════════════════════════════════════ */
/* ── T1: belt-and-suspenders — Profil réel badge stays hidden ── */
.pvc-badge-v2--real,
.pvc-badge-v2--claim {
display: none !important;
}
/* ── T2: CTA full-width + column on ALL screens (global, no @media) ── */
.pvc-cta-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
}
.pvc-btn-reserve-v2 {
width: 100% !important;
text-align: center !important;
display: block !important;
}
.pvc-profile-link {
display: block !important;
text-align: center !important;
margin-top: 6px !important;
}
/* ── T3: "Sélectionné par Fixeo" chip — more visible trust signal ── */
.pvc-info-chip.chip-trust {
background: rgba(255,255,255,0.10) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: rgba(255,255,255,0.85) !important;
font-weight: 500 !important;
box-shadow: 0 0 12px rgba(255,255,255,0.06) !important;
}
/* ═══════════════════════════════════════════════════════════════
FINAL CLEAN LAUNCH — v12
T1: badge kill T4: avatar badge glow T5: orphan cleanup
CSS-only additions. No layout change. No regression.
═══════════════════════════════════════════════════════════════ */
/* ── T1: Final badge kill (belt-and-suspenders, last in file) ── */
.pvc-badge-v2--real {
display: none !important;
}
.pvc-badge-v2--claim {
display: none !important;
}
/* ── T4: Avatar badge — enhanced depth + subtle glow ── */
.pvc-avatar-badge {
width: 28px !important;
height: 28px !important;
font-size: 14px !important;
opacity: 1 !important;
box-shadow:
0 4px 12px rgba(0,0,0,0.50),
0 0 10px rgba(255,255,255,0.08) !important;
}
/* ── T5: Hide orphan under-cta if still in DOM from cached render ── */
.pvc-under-cta {
display: none !important;
}
/* ── T5: Hide chip-trust if still in DOM from cached render ── */
.pvc-info-chip.chip-trust {
display: none !important;
}
/* ── T5: Hide empty info-bar if no chips remain ── */
.pvc-info-bar:empty {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════
LIVE MARKETPLACE SIGNALS — v13
Append-only. Do NOT edit lines above.
Adds: .pvc-live-signal, .pvc-live-dot, subtle hover energy.
══════════════════════════════════════════════════════════════ */
/* ── Live signal strip (replaces pvc-fomo for qualified artisans) ── */
.pvc-live-signals {
display: flex;
align-items: center;
gap: 8px;
padding: 0 18px;
margin-top: 6px;
flex-wrap: wrap;
}
/* Individual signal pill */
.pvc-live-signal {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .63rem;
font-weight: 600;
letter-spacing: .02em;
padding: 3px 8px;
border-radius: 20px;
white-space: nowrap;
line-height: 1.3;
}
/* Tier 1 — fast response (score >= 90) */
.pvc-live-signal--fast {
background: rgba(32, 201, 151, .10);
color: #1fbd8a;
border: 1px solid rgba(32, 201, 151, .20);
}
/* Tier 2 — active this week (score 80–89) */
.pvc-live-signal--active {
background: rgba(96, 165, 250, .10);
color: #60a5fa;
border: 1px solid rgba(96, 165, 250, .18);
}
/* Tier 3 — by appointment (score < 80) */
.pvc-live-signal--rdv {
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .45);
border: 1px solid rgba(255, 255, 255, .08);
}
/* Context signal — rating / city */
.pvc-live-signal--context {
background: rgba(246, 201, 14, .08);
color: rgba(246, 201, 14, .80);
border: 1px solid rgba(246, 201, 14, .14);
}
/* Live pulse dot (for fast/active only) */
.pvc-live-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.pvc-live-signal--fast .pvc-live-dot { background: #1fbd8a; animation: pvc-pulse-dot 2.2s ease-in-out infinite; }
.pvc-live-signal--active .pvc-live-dot { background: #60a5fa; animation: pvc-pulse-dot 3s ease-in-out infinite; }
@keyframes pvc-pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .45; transform: scale(.7); }
}
/* ── Hide old pvc-fomo (replaced by pvc-live-signals) ── */
.pvc-fomo {
display: none !important;
}
/* ── Hover energy — subtle lift + glow ── */
#fixeo-homepage-vedette-grid .pvc-card {
transition:
transform 180ms cubic-bezier(.25,.8,.25,1),
box-shadow 180ms cubic-bezier(.25,.8,.25,1),
border-color 180ms ease;
will-change: transform;
}
#fixeo-homepage-vedette-grid .pvc-card:hover {
transform: translateY(-3px);
box-shadow:
0 8px 24px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.07),
0 0 16px rgba(32,201,151,.08);
border-color: rgba(255,255,255,.10);
}
/* Stars warm up slightly on card hover */
#fixeo-homepage-vedette-grid .pvc-card:hover .pvc-stars-v2 {
color: #f8d648;
transition: color 180ms ease;
}
/* Rating state text — softer */
.pvc-rating-state {
font-size: .67rem;
color: rgba(255,255,255,.38);
font-style: italic;
}
/* ── Trust line upgrade — slightly more visible ── */
.pvc-trust-line {
font-size: .64rem;
color: rgba(255,255,255,.52);
padding: 0 18px;
margin-top: 5px;
letter-spacing: .01em;
}
/* ── Mobile: signal pills stay compact ── */
@media (max-width: 640px) {
.pvc-live-signals {
gap: 5px;
margin-top: 4px;
}
.pvc-live-signal {
font-size: .60rem;
padding: 2px 7px;
}
#fixeo-homepage-vedette-grid .pvc-card:hover {
transform: none; /* no lift on touch — no reflow cost */
}
}
@media (max-width: 380px) {
.pvc-live-signal {
font-size: .58rem;
padding: 2px 6px;
}
}
/* ═══════════════════════════════════════════════════════════════
PHASE J-1 — Marketplace Energy & Trust Refresh — v14
Append-only. Never edit lines above.
Changes:
J1-A: trust line opacity boost (0.45/0.52 → 0.78)
J1-B: city pill opacity boost (0.42 → 0.60)
J1-C: rating-state credible (non-italic, correct colour per tier)
J1-D: section header — new link/counter styles
J1-E: mobile swipe hint — narrower card for wider peek
J1-F: "Voir profil" touch target boost on mobile
═══════════════════════════════════════════════════════════════ */
/* ── J1-A: Trust line — from near-invisible to readable ── */
.pvc-trust-line {
opacity: 0.78 !important;
font-size: 0.66rem !important;
color: rgba(255,255,255,0.78) !important;
}
/* ── J1-B: City pill — from whisper to legible ── */
.pvc-city-pill {
color: rgba(255,255,255,0.60) !important;
font-size: 0.70rem !important;
}
/* ── J1-C: Rating state — credible tier text, not italic ghost ── */
.pvc-rating-state {
font-style: normal !important;
font-weight: 500 !important;
font-size: 0.70rem !important;
color: rgba(255,255,255,0.60) !important;
margin-left: 7px !important;
letter-spacing: 0.01em !important;
}
/* ── J1-D: Section header — "voir tous" link + counter pill ── */
/* Wrapper becomes a link */
.fhp-see-all {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none !important;
cursor: pointer !important;
}
.fhp-see-all:hover .fhp-counter {
background: rgba(32,201,151,0.18) !important;
border-color: rgba(32,201,151,0.40) !important;
}
.fhp-see-all-arrow {
font-size: 0.80rem !important;
color: #20c997 !important;
opacity: 0.75 !important;
transition: transform 0.18s ease !important;
}
.fhp-see-all:hover .fhp-see-all-arrow {
transform: translateX(3px) !important;
opacity: 1 !important;
}
/* Subtitle — trust signals line: slightly brighter */
.fhp-subtitle {
color: rgba(255,255,255,0.62) !important;
font-size: 0.84rem !important;
line-height: 1.4 !important;
}
/* ── J1-E: Mobile swipe discoverability — narrower card = wider peek ── */
/* On 390px screen: 343px → 318px card = 72px peek gap vs 47px before.
The gap + shadow of next card is now clearly visible.
Scoped to ≤480px only — preserves desktop/tablet layout. */
@media (max-width: 480px) {
#fixeo-homepage-vedette-grid .fhp-card {
min-width: 318px !important;
max-width: 318px !important;
width: 318px !important;
}
}
/* Swipe hint: subtle "see next" arrow on first card (CSS only, no JS) */
@media (max-width: 480px) {
#fixeo-homepage-vedette-grid {
/* Slightly overdrag so next card is partially visible — reinforces swipe */
padding-right: 32px !important;
}
}
/* ── J1-F: "Voir profil" — improved touch target on mobile ── */
@media (max-width: 640px) {
.pvc-profile-link {
min-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.76rem !important;
color: rgba(255,255,255,0.68) !important;
padding: 4px 0 !important;
}
}
/* ── J1-E safety: 320px breakpoint — card can't be wider than viewport ── */
@media (max-width: 340px) {
#fixeo-homepage-vedette-grid .fhp-card {
min-width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
width: calc(100vw - 32px) !important;
}
}
/* ═══════════════════════════════════════════════════════════════
PHASE J-2 — Marketplace Depth & Browse Feeling — v15
Append-only. Never edit lines above. Braces must stay balanced.
Changes:
J2-A: counter colour fix — green through wrapper
J2-B: mobile section top padding 80px → 48px
J2-C: mobile header compression — smaller, single-row
J2-D: carousel peek engineering — negative margin overflow trick
J2-E: continuation gradient mask — right edge fades to suggest more
J2-F: "Voir tous" — stronger, explore-oriented label
J2-G: scroll-snap-align + scroll-padding for comfortable snapping
═══════════════════════════════════════════════════════════════ */
/* ── J2-A: Counter colour — fix link-colour bleed ── */
.fhp-see-all {
color: inherit !important;
text-decoration: none !important;
}
#fixeo-homepage-header .fhp-counter {
color: #20c997 !important;
background: rgba(32,201,151,0.12) !important;
border: 1px solid rgba(32,201,151,0.28) !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
}
/* Arrow inherits green from counter context */
.fhp-see-all-arrow {
color: #20c997 !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
}
/* ── J2-B: Mobile section top padding reduction ── */
/* 80px top padding is correct for desktop (clean separation from mini-trust strip).
On mobile the mini-trust strip above already creates 212px of separation
→ reduce artisans section PT to 48px on mobile. */
@media (max-width: 640px) {
#artisans-section {
padding-top: 48px !important;
}
}
/* ── J2-C: Mobile header compression ── */
/* Current: hdrH=175px (2-row wrap). Target: ≤110px (1-row or compact 2-row). */
@media (max-width: 640px) {
.fhp-section-header {
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 8px !important;
margin-bottom: 14px !important;
padding-bottom: 12px !important;
}
.fhp-header-copy {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.fhp-title {
font-size: 1.05rem !important;
margin-bottom: 3px !important;
line-height: 1.2 !important;
}
.fhp-subtitle {
font-size: 0.70rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
display: block !important;
}
.fhp-see-all {
flex-shrink: 0 !important;
align-self: flex-start !important;
}
#fixeo-homepage-header .fhp-counter {
font-size: 0.68rem !important;
padding: 4px 10px !important;
white-space: nowrap !important;
}
.fhp-see-all-arrow {
display: none !important; /* hidden on mobile — counter pill is CTA */
}
}
/* ── J2-D: Mobile carousel peek — overflow engineering ── */
/* Problem: gridW≈c0W → peekApprox≈4px → no next-card visible.
Fix: overflow the grid rightward beyond its container using negative margin-right.
The parent .results-page-shell has overflow:hidden by default which clips this —
we need overflow:visible on the chain so the peek shows.
Scope: ≤640px (carousel mode only). */
@media (max-width: 640px) {
/* Allow the grid to bleed out of its container rightward */
#artisans-section .results-page-shell,
#artisans-section .results-layout,
#artisans-section .results-main-column {
overflow-x: visible !important;
}
/* Grid itself: extend width beyond container, pull left to stay aligned */
#fixeo-homepage-vedette-grid {
width: calc(100vw - 20px) !important;
max-width: none !important;
/* Left-align with the container (20px = container left padding) */
margin-left: 0 !important;
/* Right side bleeds into viewport — shows next card */
padding-left: 20px !important;
padding-right: 44px !important; /* extra right space = peek invitation */
box-sizing: border-box !important;
}
}
/* ── J2-E: Continuation gradient mask ── */
/* A subtle right-edge fade tells the user the list continues.
CSS mask-image on the grid: content is fully opaque to 78%, then fades to transparent.
No layout impact. No JS. No performance cost beyond a composite layer. */
@media (max-width: 640px) {
#fixeo-homepage-vedette-grid {
-webkit-mask-image: linear-gradient(
to right,
black 0%,
black 78%,
transparent 100%
) !important;
mask-image: linear-gradient(
to right,
black 0%,
black 78%,
transparent 100%
) !important;
}
}
/* ── J2-F: Scroll snap polish ── */
/* Ensure each card snaps cleanly to start, with correct alignment. */
@media (max-width: 640px) {
#fixeo-homepage-vedette-grid .fhp-card {
scroll-snap-align: start !important;
scroll-snap-stop: normal !important;
}
/* scroll-padding-left so snap target is inset from grid left edge */
#fixeo-homepage-vedette-grid {
scroll-padding-left: 20px !important;
}
}
/* ── J2-G: Desktop — "Voir tous" counter pill upgrade ── */
/* On desktop: make the counter more inviting, less status-badge, more CTA. */
@media (min-width: 641px) {
.fhp-see-all {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
border-radius: 24px !important;
padding: 4px 4px 4px 12px !important;
background: rgba(32,201,151,0.06) !important;
border: 1px solid rgba(32,201,151,0.15) !important;
transition: background 0.18s ease, border-color 0.18s ease !important;
}
.fhp-see-all:hover {
background: rgba(32,201,151,0.14) !important;
border-color: rgba(32,201,151,0.32) !important;
}
/* Inner counter loses its own border since the wrapper already has one */
.fhp-see-all #fixeo-homepage-header .fhp-counter,
#fixeo-homepage-header .fhp-see-all .fhp-counter {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.fhp-see-all-arrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
border-radius: 50% !important;
background: rgba(32,201,151,0.18) !important;
font-size: 0.80rem !important;
transition: background 0.18s ease, transform 0.18s ease !important;
}
.fhp-see-all:hover .fhp-see-all-arrow {
background: rgba(32,201,151,0.30) !important;
transform: translateX(2px) !important;
}
}
/* ── J2 card width unification: 82vw across all ≤640px (overrides J-1's 318px) ── */
@media (max-width: 640px) {
#fixeo-homepage-vedette-grid .fhp-card {
min-width: 82vw !important;
max-width: 82vw !important;
width: 82vw !important;
}
}
/* ≤340px safety: floor at calc(100vw - 32px) so card never clips viewport */
@media (max-width: 340px) {
#fixeo-homepage-vedette-grid .fhp-card {
min-width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
width: calc(100vw - 32px) !important;
}
}
/* ── J2 SPECIFICITY FIX: use double-ID-class selector to beat (2,0,0) from patch CSS ── */
/* marketplace-premium-patch.css uses #id.class selectors at (2,0,0) → must match or exceed */
@media (max-width: 640px) {
#fixeo-homepage-vedette-grid.ssb2-vedette-grid,
#fixeo-homepage-vedette-grid.fhp-grid,
#fixeo-homepage-vedette-grid {
/* J2: full-viewport grid so next card peeks into view */
width: 100vw !important;
padding-left: 20px !important;
padding-right: 48px !important;
}
#fixeo-homepage-vedette-grid.ssb2-vedette-grid .fhp-card,
#fixeo-homepage-vedette-grid.fhp-grid .fhp-card,
#fixeo-homepage-vedette-grid .fhp-card {
/* J2: 82vw card width for peek gap */
min-width: 82vw !important;
max-width: 82vw !important;
width: 82vw !important;
}
}
/* ── J2 peek calibration: 82vw→76vw for proper peek gap (grid starts at ~29px) ── */
/* Math at 390px: grid.left=29, padL=20, card0.left=49, card0.right=49+296=345,
gap=14, card1.left=359, viewport=390, PEEK=31px — clearly visible ── */
@media (max-width: 640px) {
#fixeo-homepage-vedette-grid.ssb2-vedette-grid .fhp-card,
#fixeo-homepage-vedette-grid.fhp-grid .fhp-card,
#fixeo-homepage-vedette-grid .fhp-card {
min-width: 76vw !important;
max-width: 76vw !important;
width: 76vw !important;
}
}
@media (max-width: 340px) {
#fixeo-homepage-vedette-grid.ssb2-vedette-grid .fhp-card,
#fixeo-homepage-vedette-grid.fhp-grid .fhp-card,
#fixeo-homepage-vedette-grid .fhp-card {
min-width: calc(100vw - 44px) !important;
max-width: calc(100vw - 44px) !important;
width: calc(100vw - 44px) !important;
}
}
/* ═══════════════════════════════════════════════════════════════
PHASE J-2B — Header Hierarchy + City Alignment + Depth Polish
Append-only. Never edit lines above. Braces must stay balanced.
Changes:
J2B-A: City pill — nowrap + ellipsis for long names like "Béni Mellal"
J2B-B: Mobile header — 2-row layout (title/subtitle | counter)
Title larger + stronger; counter full-width below
J2B-C: Subtitle — marketplace depth signal (not features list)
J2B-D: Counter pill on mobile — left-aligned, feels like proof not label
J2B-E: Desktop header — minor subtitle spacing polish
═══════════════════════════════════════════════════════════════ */
/* ── J2B-A: City pill — icon + text always on same line ── */
/* Root cause: whiteSpace:normal on 29px-wide pill → emoji wraps to next line.
Fix: nowrap + ellipsis truncation at a sensible max-width. */
.pvc-city-pill {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 130px !important;
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
vertical-align: middle !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* ── J2B-B: Mobile header — two-row layout for clear hierarchy ── */
/* Row 1: title (full width) + subtitle (full width) = emotional content
Row 2: "+735 artisans actifs" counter = marketplace proof
The counter pill now has its own row → no longer fights the title for space. */
@media (max-width: 640px) {
.fhp-section-header {
/* Switch from J-2's flex-row to column on mobile */
flex-direction: column !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 10px !important;
margin-bottom: 16px !important;
padding-bottom: 14px !important;
}
.fhp-header-copy {
width: 100% !important;
flex: none !important;
min-width: 0 !important;
}
.fhp-title {
/* Stronger emotional presence now that it has full width */
font-size: 1.15rem !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
margin-bottom: 5px !important;
line-height: 1.25 !important;
white-space: normal !important; /* allow wrapping on narrow screens */
}
.fhp-subtitle {
/* Local + safety signal — clear and legible */
font-size: 0.74rem !important;
color: rgba(255,255,255,0.58) !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
max-width: 100% !important;
line-height: 1.4 !important;
}
/* Counter pill: own row, left-aligned, reads as marketplace proof */
.fhp-see-all {
width: auto !important;
align-self: flex-start !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
#fixeo-homepage-header .fhp-counter {
/* Slightly larger on mobile — it's now the primary CTA of the header */
font-size: 0.72rem !important;
padding: 5px 12px !important;
font-weight: 700 !important;
}
/* Arrow: show on mobile in column layout (it was hidden in J-2 row layout) */
.fhp-see-all-arrow {
display: inline-flex !important;
font-size: 0.72rem !important;
opacity: 0.80 !important;
}
}
/* ── J2B-C: Desktop subtitle — slightly more breathing room ── */
@media (min-width: 641px) {
.fhp-subtitle {
margin-top: 3px !important;
line-height: 1.5 !important;
font-size: 0.86rem !important;
}
}
/* ── J2B-D: Meta row containing city pill — prevent overflow ── */
/* The .pvc-meta-row holds cat-pill + city-pill + avail-badge.
On narrow cards, enforce nowrap + proper truncation. */
.pvc-meta-row {
flex-wrap: nowrap !important;
min-width: 0 !important;
overflow: hidden !important;
}
/* Cat pill must also be able to shrink */
.pvc-cat-pill {
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 90px !important;
}
/* Avail badge: never shrink, never wrap */
.pvc-avail-badge {
flex-shrink: 0 !important;
white-space: nowrap !important;
margin-left: auto !important;
}
/* ═══════════════════════════════════════════════════════════════
PHASE J-4 — Card Premiumization & Human Trust
Append-only. Never edit lines above. Braces must stay balanced.
Changes:
J4-A: Avatar human presence — 64→72px + subtle presence ring
J4-B: Top artisan differentiation — first 3 cards brighter glow
J4-C: CTA glass-button premium — inset highlight + 12→14px radius
J4-D: "Voir profil" link feel — hover underline + slight color boost
J4-E: Mobile tap comfort — active inner ring feedback
═══════════════════════════════════════════════════════════════ */
/* ── J4-A: Avatar human presence uplift ── */
/* Increase avatar from 64px → 72px for stronger face/icon presence.
Also add a subtle 2px transparent gap + faint white outline ring via outline
trick — makes avatar "float" slightly above the card bg, feeling more like
a real profile photo frame rather than a flat colored square.
outline-offset creates the gap; outline itself is the ring. */
.fhp-card .pvc-avatar {
width: 72px !important;
height: 72px !important;
border-radius: 18px !important;
outline: 2px solid rgba(255, 255, 255, 0.10) !important;
outline-offset: 3px !important;
transition: outline-color 0.22s ease !important;
}
/* Clip inner content (img / silhouette) to the new radius */
.fhp-card .pvc-avatar > .pvc-avatar-silhouette,
.fhp-card .pvc-avatar > .pvc-avatar-img {
border-radius: 18px !important;
}
/* Hover: ring brightens — avatar "activates" when user approaches card */
@media (min-width: 641px) {
.fhp-card:hover .pvc-avatar {
outline-color: rgba(255, 255, 255, 0.22) !important;
}
}
/* Keep overflow:visible for badge bleed */
.fhp-card .pvc-avatar {
overflow: visible !important;
}
/* Clip content (not badge) with inner elements */
.fhp-card .pvc-avatar > .pvc-avatar-silhouette {
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
border-radius: 18px !important;
}
.fhp-card .pvc-avatar > .pvc-avatar-img {
overflow: hidden !important;
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
border-radius: 18px !important;
}
/* ── J4-B: Top artisan differentiation ── */
/* First 3 cards = highest-scored artisans (sorted by FixeoMatchingEngine).
Very subtle: slightly brighter border + faint ambient glow.
No badge, no label, no text change — purely visual premium weight.
Specificity matches existing fhp-card rules, appended last = wins. */
#fixeo-homepage-vedette-grid .fhp-card:nth-child(1),
#fixeo-homepage-vedette-grid .fhp-card:nth-child(2),
#fixeo-homepage-vedette-grid .fhp-card:nth-child(3) {
border-color: rgba(255, 255, 255, 0.13) !important;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.38),
0 0 0 0.5px rgba(255, 255, 255, 0.06) !important;
}
/* On desktop hover: top-3 get a slightly warmer glow than base cards */
@media (min-width: 641px) {
#fixeo-homepage-vedette-grid .fhp-card:nth-child(1):hover,
#fixeo-homepage-vedette-grid .fhp-card:nth-child(2):hover,
#fixeo-homepage-vedette-grid .fhp-card:nth-child(3):hover {
border-color: rgba(255, 255, 255, 0.20) !important;
box-shadow:
0 32px 74px rgba(0, 0, 0, 0.55),
0 0 48px rgba(32, 201, 151, 0.10),
0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}
}
/* ── J4-C: CTA glass-button premium ── */
/* Add an inset top highlight (glass bevel) + round up radius 12→14px.
The inset shadow is invisible on a dark bg but visible on the button gradient
→ gives a subtle "raised glass" dimensional feeling. */
.pvc-btn-reserve-v2 {
border-radius: 14px !important;
box-shadow:
0 12px 34px rgba(255, 77, 141, 0.42),
0 0 20px rgba(168, 85, 247, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
letter-spacing: 0.015em !important;
}
/* Hover: lift + brighten inset */
.pvc-btn-reserve-v2:hover {
box-shadow:
0 20px 52px rgba(255, 77, 141, 0.55),
0 0 34px rgba(168, 85, 247, 0.44),
inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
border-radius: 14px !important;
}
/* Active: crisp snap + slightly reduced inset */
.pvc-btn-reserve-v2:active {
transform: scale(0.975) !important;
box-shadow:
0 6px 18px rgba(255, 77, 141, 0.32),
0 0 14px rgba(168, 85, 247, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
transition: transform 0.07s ease, box-shadow 0.07s ease !important;
}
/* Mobile: keep shadow but no hover lift (touch devices) */
@media (max-width: 640px) {
.pvc-btn-reserve-v2 {
box-shadow:
0 10px 28px rgba(255, 77, 141, 0.38),
0 0 16px rgba(168, 85, 247, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
}
/* ── J4-D: "Voir profil →" link premium feel ── */
/* Add bottom border on hover — makes it feel like a real hyperlink in a premium
product rather than a faint label. The transition is short (0.15s) for snappy feel. */
.pvc-profile-link {
color: rgba(255, 255, 255, 0.70) !important;
border-bottom: 1px solid transparent !important;
transition: color 0.15s ease, border-color 0.15s ease !important;
padding-bottom: 1px !important;
display: inline-block !important;
/* Override the block+center from v11 to restore right-alignment */
text-align: center !important;
}
.pvc-profile-link:hover {
color: rgba(255, 255, 255, 0.90) !important;
border-bottom-color: rgba(255, 255, 255, 0.28) !important;
}
/* Mobile: slightly stronger base color since no hover state */
@media (max-width: 640px) {
.pvc-profile-link {
color: rgba(255, 255, 255, 0.72) !important;
}
}
/* ── J4-E: Mobile tap comfort ── */
/* On touch: faint inner ring on active state — tactile confirmation without
animation cost. The inset ring is GPU-accelerated (box-shadow, no layout). */
@media (max-width: 640px) {
.pvc-card:active {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
transform: scale(0.990) !important;
transition: transform 0.07s ease, box-shadow 0.07s ease !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
K-2: City Explore Strip — Premium Local Marketplace Exploration
══════════════════════════════════════════════════════════════════════
Sits below the artisan carousel. Shows adjacent + national city chips.
Philosophy: app-like exploration feel — NOT an annuaire / SEO footer.
Append-only. Do not modify existing blocks. Braces must stay balanced.
═══════════════════════════════════════════════════════════════════ */
/* ── K2-A: Strip container ── */
.fhp-explore-strip {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 24px !important;
padding: 16px 0 0 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
/* ── K2-B: "Explorer" label ── */
.fhp-explore-label {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.38) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
margin-right: 4px !important;
padding-top: 1px !important;
}
/* ── K2-C: City chip base ── */
.fhp-explore-chip {
display: inline-flex !important;
align-items: center !important;
padding: 5px 13px !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
background: rgba(255, 255, 255, 0.05) !important;
color: rgba(255, 255, 255, 0.62) !important;
font-size: 0.80rem !important;
font-weight: 500 !important;
line-height: 1 !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
flex-shrink: 0 !important;
}
.fhp-explore-chip:hover {
background: rgba(255, 255, 255, 0.10) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
color: rgba(255, 255, 255, 0.88) !important;
}
.fhp-explore-chip:active {
background: rgba(255, 255, 255, 0.15) !important;
transform: scale(0.97) !important;
transition: transform 0.08s ease !important;
}
/* ── K2-D: Adjacent-city chips — subtle green tint (regional intelligence) ── */
/* Adjacent cities get a faint emerald accent — they are geographically "close".
This communicates regional connectivity without any explicit label. */
.fhp-explore-chip.fhp-explore-adj {
border-color: rgba(32, 201, 151, 0.28) !important;
color: rgba(32, 201, 151, 0.82) !important;
background: rgba(32, 201, 151, 0.06) !important;
}
.fhp-explore-chip.fhp-explore-adj:hover {
background: rgba(32, 201, 151, 0.13) !important;
border-color: rgba(32, 201, 151, 0.46) !important;
color: rgba(32, 201, 151, 1.00) !important;
}
/* ── K2-E: Mobile — horizontal scroll strip ── */
@media (max-width: 640px) {
.fhp-explore-strip {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 16px 0 12px 0 !important;
margin-top: 20px !important;
/* Right fade — visual continuation cue */
-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
}
.fhp-explore-strip::-webkit-scrollbar {
display: none !important;
}
.fhp-explore-label {
font-size: 0.68rem !important;
}
.fhp-explore-chip {
font-size: 0.76rem !important;
padding: 6px 12px !important;
}
}