/* TerTerroir — dark urban, mobile-first — thèmes clair / sombre (data-theme sur ) */ [hidden] { display: none !important; } :root { --brand: var(--accent-cta); --border-subtle: var(--hairline); --bg-primary: #0a0a0a; --bg-secondary: #151515; --bg-card: #1a1a1a; --border: #2a2a2a; --text-primary: #ffffff; --text-secondary: #c6c6c6; --text-muted: #8a8a8a; /* Orange vif réservé aux CTA pleins ; --accent = marque atténuée (liens, nav, puces) */ --accent-cta: #ff6b35; --accent: #d4825f; --accent-dark: #a63c18; --accent-light: rgba(212, 130, 95, 0.2); --success: #5dcaa5; --star: #ffb347; --text-on-accent: #0a0a0a; --inverse-on-brand: #ffffff; --accent-soft: rgba(212, 130, 95, 0.34); --accent-muted-text: #eab19a; --accent-hover: var(--accent-dark); --danger: #ff6b6b; --btn-elevated: #3a3a3a; --warm-text: #ff8a65; --bg-raised: #0d0d0d; --bottom-nav-bg: #0f0f0f; --radius: 12px; --radius-xl: 18px; --font-section: 18px; --font-section-weight: 600; --font-body: 14px; --font-caption: 12px; --space-screen: 16px; --space-xs: 6px; --space-sm: 10px; --space-md: 16px; --space-lg: 24px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* #main-content avec tab bar réserve déjà ~60px + safe — pas redoubler dans les zones scroll */ --scroll-pad-bottom: calc(16px + var(--safe-bottom)); /* Listes avec FAB « remonter » (fixe bas-droite ~48px) */ --scroll-pad-bottom-fab: calc(56px + var(--safe-bottom)); /* Finitions premium : élévation & séparations légères */ --ease-premium: cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45); --shadow-nav: 0 -8px 32px rgba(0, 0, 0, 0.55); --shadow-fab: 0 6px 20px rgba(255, 107, 53, 0.32); --hairline: rgba(255, 255, 255, 0.06); --header-scrim: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(10, 10, 10, 0.92) 100%); /* Compatibilité règles existantes */ --bg: var(--bg-primary); --card: var(--bg-secondary); --text: var(--text-primary); --muted: var(--text-secondary); --muted-tag: var(--text-secondary); --badge: var(--success); } [data-theme='light'] { --border-subtle: #eeeeee; --bg-primary: #f5f5f5; --bg-secondary: #ffffff; --bg-card: #ffffff; --border: #e0e0e0; --text-primary: #1a1a1a; --text-secondary: #3d3d3d; --text-muted: #737373; --accent-cta: #ff6b35; --accent: #b8572f; --accent-dark: #8b3a14; --accent-light: rgba(184, 87, 47, 0.14); --success: #2e9e7a; --star: #c77d00; --text-on-accent: #1a1a1a; --inverse-on-brand: #ffffff; --accent-soft: rgba(184, 87, 47, 0.22); --accent-muted-text: #9a3412; --accent-hover: var(--accent-dark); --danger: #dc2626; --btn-elevated: #e5e5e5; --warm-text: #c2410c; --bg-raised: #fafafa; --bottom-nav-bg: #ffffff; --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.07); --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.08); --shadow-fab: 0 6px 20px rgba(255, 107, 53, 0.28); --hairline: rgba(0, 0, 0, 0.07); --header-scrim: linear-gradient(180deg, rgba(245, 245, 245, 0.98) 0%, rgba(245, 245, 245, 0.94) 100%); --bg: var(--bg-primary); --card: var(--bg-secondary); --text: var(--text-primary); --muted: var(--text-secondary); --muted-tag: var(--text-secondary); --badge: var(--success); } *, *::before, *::after { box-sizing: border-box; } /* Transitions thème : ciblé (pas sur *) pour éviter du jank au scroll / repaint massif */ @media (prefers-reduced-motion: no-preference) { html, body, .screen, .bottom-nav, .home-card, .artisan-card, .produit-card, .pu-card, .notifications-card, .inscription-input, .inscription-submit, .nav-back { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100dvh; font-family: "Inter", system-ui, sans-serif; font-size: var(--font-body); line-height: 1.5; letter-spacing: -0.011em; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } #app img { max-width: 100%; height: auto; } button:not(:disabled), input[type='button']:not(:disabled), input[type='submit']:not(:disabled), input[type='reset']:not(:disabled), [role='button'] { touch-action: manipulation; } /* Sélection de texte : touche de marque sans gêner la lecture */ ::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text-primary); } [data-theme='light'] ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); } html { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } .screen.active { transition: none !important; } } /* Lien « Aller au contenu » (clavier / lecteurs d’écran) */ .skip-link { position: absolute; top: 0; left: 0; z-index: 10001; padding: 12px 18px; margin: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-on-accent); background: var(--accent-cta); border-radius: 10px; text-decoration: none; transform: translateY(-160%); transition: transform 0.22s var(--ease-premium), background 0.2s ease; } .skip-link:focus { outline: none; } .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--text-on-accent); outline-offset: 2px; } .skip-link:hover { background: var(--accent-dark); } #main-content:focus { outline: none; } #app { min-height: 100dvh; padding: 0; overflow-x: hidden; display: flex; flex-direction: column; background: var(--bg-primary); } body { background: var(--bg-primary); } /* Avec barre d’onglets : hauteur = viewport pour que les .screen en position absolute remplissent la zone sans étirer toute la page (sinon « écran trop long » + double scroll). */ #app.app--tab-bar { min-height: 100dvh; height: 100dvh; max-height: 100dvh; overflow: hidden; } #app.app--tab-bar #main-content.screens { flex: 1 1 0%; min-height: 0; overflow: hidden; position: relative; max-width: 480px; margin: 0 auto; width: 100%; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } .screens { position: relative; max-width: 480px; margin: 0 auto; /* Hauteur mini : les .screen sont en absolute ; sans ça le
peut s’effondrer à 0. */ min-height: 100dvh; } /* Bottom navigation (tous les écrans sauf accueil) — z-index 200 : au-dessus du contenu, sous FAB / modales */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: stretch; justify-content: space-around; max-width: 480px; height: 60px; margin: 0 auto; padding: 0 4px env(safe-area-inset-bottom, 0px); box-sizing: content-box; background: var(--bottom-nav-bg); background: color-mix(in srgb, var(--bottom-nav-bg) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-top: 1px solid var(--hairline); box-shadow: var(--shadow-nav); } .bottom-nav__btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; margin: 0; padding: 6px 4px; font: inherit; font-size: 10px; font-weight: 600; color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .bottom-nav__btn.is-active { color: var(--accent); } @media (prefers-reduced-transparency: reduce) { .bottom-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bottom-nav-bg); } } .bottom-nav__icon { font-size: 20px; line-height: 1; } .bottom-nav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .scroll-top-fab { position: fixed; bottom: 80px; right: 16px; z-index: 999; width: 48px; height: 48px; padding: 0; margin: 0; border: none; border-radius: 50%; background: var(--accent-cta); color: var(--text-on-accent); box-shadow: var(--shadow-fab); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s var(--ease-premium), transform 0.15s var(--ease-premium), background 0.2s ease; } .scroll-top-fab.is-visible:hover { background: var(--accent-dark); } .scroll-top-fab.is-visible { opacity: 1; pointer-events: auto; } .scroll-top-fab__icon { font-size: 22px; line-height: 1; font-weight: 700; } .resultats-view-map { flex: 0 0 auto; min-height: 220px; margin: 0 -20px; padding: 12px 20px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .resultats-map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 24px 16px; text-align: center; border-radius: var(--radius); border: 1px dashed var(--border); background: var(--bg-primary); color: var(--text-secondary); } .resultats-map-placeholder__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text-primary); } .resultats-map-placeholder__sub { margin: 0; font-size: 13px; line-height: 1.4; } /* Écrans : inactive = absolute plein cadre ; active = même chose + z-index (pas `relative`, sinon la hauteur suit le contenu et #app dépasse le viewport). */ .screen { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-height: 0; box-sizing: border-box; padding: calc(20px + var(--safe-top)) var(--space-screen) calc(10px + var(--safe-bottom)); background: var(--bg-primary); opacity: 0; visibility: hidden; pointer-events: none; } .screen.active { position: absolute; inset: 0; z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease; } .screen-connexion, .screen-parametres-utilisateur { background: var(--bg-primary); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--scroll-pad-bottom); } /* ——— Accueil : héros + CTA profil, scroll si besoin ——— */ .screen-home { min-height: auto; height: auto; max-height: none; overflow-x: hidden; overflow-y: auto; justify-content: flex-start; padding-bottom: var(--scroll-pad-bottom-fab); } .home-welcome { position: relative; width: 100%; padding: 4px 0 8px; flex-shrink: 0; } .home-welcome__glow { position: absolute; inset: -10% -40% auto; height: 220px; background: radial-gradient( ellipse 80% 100% at 50% 0%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 70% ); pointer-events: none; z-index: 0; } .home-hero { text-align: center; flex-shrink: 0; } .home-hero--welcome { position: relative; z-index: 1; } .home-headline { margin: 12px 8px 0; font-size: clamp(1.35rem, 4.5vw, 1.65rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--text-primary); } .home-lede { margin: 10px auto 0; padding: 0 4px; max-width: 22rem; font-size: var(--font-body); line-height: 1.45; color: var(--text-secondary); } .home-cta-primary { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 16px; padding: 15px 18px; border: none; border-radius: var(--radius-xl); font: inherit; cursor: pointer; background: linear-gradient(145deg, var(--accent-cta) 0%, var(--accent-dark) 100%); color: var(--text-on-accent); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-cta) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: transform 0.18s var(--ease-premium), box-shadow 0.22s var(--ease-premium); } .home-cta-primary:hover { background: linear-gradient(145deg, var(--accent-dark) 0%, color-mix(in srgb, var(--accent-dark) 88%, #000) 100%); box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-cta) 48%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .home-cta-primary:active { transform: scale(0.988); } .home-cta-primary__text { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; pointer-events: none; } .home-cta-primary__sub { font-size: 12px; font-weight: 500; opacity: 0.93; pointer-events: none; } .home-explore-label { margin: 14px 0 0; width: 100%; padding-left: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-tag); } /* Géoloc sous le hero — pas de flex-grow (évite le vide au milieu) */ .home-center { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; } .home-geoloc { display: none; margin: 0; max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; color: var(--success); opacity: 0; transition: opacity 0.35s ease; } .home-geoloc.is-active { display: block; opacity: 1; } .home-logo-img { display: block; width: 120px; height: auto; margin: 0 auto; } .home-tagline { margin: 12px 0 0; font-size: 14px; color: var(--muted-tag); } .home-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; flex-shrink: 0; } .home-card { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%; min-height: 90px; padding: var(--space-screen); text-align: left; color: inherit; font: inherit; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: border-color 0.22s var(--ease-premium), transform 0.18s var(--ease-premium), box-shadow 0.22s var(--ease-premium); } .home-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card), 0 8px 28px rgba(0, 0, 0, 0.35); } .home-card:active { transform: scale(0.992); } [data-theme='light'] .home-card:hover { box-shadow: var(--shadow-card), 0 10px 28px rgba(0, 0, 0, 0.09); } .home-card__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--accent); } .icon-bubble { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); } [data-theme='light'] .icon-bubble { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .icon-bubble svg { display: block; flex-shrink: 0; width: 28px; height: 28px; } .icon-bubble--emoji { font-size: 26px; line-height: 1; } .home-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .home-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .home-card__sub { font-size: 13px; color: var(--muted-tag); } /* Header commun (écrans secondaires) */ .nav-back { align-self: flex-start; margin: 0; padding: 10px 0; min-height: 44px; box-sizing: border-box; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; transition: opacity 0.2s ease; } .nav-back:active { opacity: 0.75; } .page-title { margin: 0; font-size: var(--font-section); font-weight: var(--font-section-weight); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; } .page-subtitle { margin: 0; font-size: var(--font-caption); color: var(--text-secondary); } .page-subtitle--resultats { line-height: 1.4; } .resultats-subtitle-primary { color: var(--text-primary); font-weight: 600; } .resultats-subtitle-count { color: var(--muted-tag); font-weight: 500; } .screen-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; flex: 0 0 auto; } /* Hubs « Cherche » / « Propose » : hauteur au contenu + marge basse barre d’onglets */ #screen-cherche.screen.active, #screen-propose.screen.active { height: auto; max-height: none; overflow-x: hidden; overflow-y: visible; display: flex; flex-direction: column; gap: 12px; padding-bottom: var(--scroll-pad-bottom-fab); background: var(--bg-primary); color: var(--text-primary); } #screen-cherche.screen.active > .nav-back, #screen-propose.screen.active > .nav-back { flex-shrink: 0; } #screen-cherche .screen-content, #screen-propose .screen-content { flex: 0 0 auto; min-height: 0; overflow-x: hidden; overflow-y: visible; -webkit-overflow-scrolling: touch; } #screen-propose-connecte.screen.active { min-height: auto; height: auto; max-height: none; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--scroll-pad-bottom-fab); background: var(--bg-primary); color: var(--text-primary); } .cherche-rayon-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 20px 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); } .cherche-rayon-bar__label { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); } .cherche-rayon-bar .search-rayon-km-select { flex: 1; min-width: 0; max-width: 220px; } .search-screen__rayon-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; padding: 0 4px; } .search-screen__rayon-label { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } .search-screen__rayon-row .search-rayon-km-select { flex: 1; min-width: 0; max-width: 200px; font-size: 14px; } .inscription-photo-section { margin-bottom: 4px; } .inscription-photo-compte { margin-bottom: 14px; } .inscription-photo-compte__hint { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); } .inscription-prestation-photos-block { margin: 16px 0 8px; } .inscription-prestation-photos-hint { margin-top: 4px; margin-bottom: 10px; } /* Toast global (ex. limite photos inscription) — créé au premier affichage */ .app-global-toast { position: fixed; bottom: max(24px, calc(12px + var(--safe-bottom))); left: 50%; transform: translateX(-50%); z-index: 100000; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; font-size: 14px; line-height: 1.45; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .app-global-toast--error { background: #c0392b; color: #fff; border-color: #c0392b; } .app-global-toast--success { background: #27ae60; color: #fff; border-color: #27ae60; } .app-global-toast--info { background: var(--accent-cta); color: #fff; border-color: var(--accent-cta); } .app-global-toast.app-global-toast--visible { opacity: 1; } /* Upload photo — spinner + toast sans durée fixe (retiré par hideUploadProgress) */ @keyframes tt-spin { to { transform: rotate(360deg); } } .tt-upload-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: tt-spin 0.8s linear infinite; vertical-align: middle; flex-shrink: 0; } .app-global-toast--uploading { display: flex; align-items: center; gap: 10px; pointer-events: none; } .app-global-toast--uploading .app-global-toast__upload-msg { flex: 1; min-width: 0; } .tt-upload-zone-host { position: relative; } .tt-upload-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-radius: inherit; background: color-mix(in srgb, var(--bg-card, #fff) 78%, transparent); pointer-events: none; } .tt-upload-overlay__text { font-size: 14px; font-weight: 500; color: var(--text-primary); } .tt-upload-overlay .tt-upload-spinner { border-color: rgba(0, 0, 0, 0.12); border-top-color: var(--accent); } /* Toasts PWA (showToast) — bas d’écran, safe-area, un seul bloc */ .tt-toast { position: fixed; left: 50%; bottom: max(12px, var(--safe-bottom)); transform: translateX(-50%) translateY(10px); z-index: 100001; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; color: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; } .tt-toast.tt-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .tt-toast--error { background: #7f1d1d; border: 1px solid rgba(0, 0, 0, 0.2); } .tt-toast--success { background: #14532d; border: 1px solid rgba(0, 0, 0, 0.15); } .tt-toast--info { background: var(--accent-cta); color: var(--text-on-accent); border: 1px solid rgba(0, 0, 0, 0.12); } .cherche-nudge-aide { margin: 0 20px 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--accent); background: linear-gradient(145deg, var(--accent-light, rgba(255, 140, 0, 0.12)), var(--bg-card)); } .cherche-nudge-aide__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text-primary); } .cherche-nudge-aide__text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); } .cherche-nudge-aide__btn { display: block; width: 100%; padding: 12px 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-on-accent, #fff); background: var(--accent-cta); border: none; border-radius: 12px; cursor: pointer; touch-action: manipulation; transition: background 0.2s ease; } .cherche-nudge-aide__btn:hover { background: var(--accent-dark); } .cherche-nudge-aide__btn:active { opacity: 0.92; } /* Écran Métiers — recherche + catégories + liste scrollable */ .screen-metiers { display: flex; flex-direction: column; overflow: hidden; } .metiers-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; gap: 0; } .metiers-toolbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .metiers-shared-filters { flex-shrink: 0; padding: 0 var(--space-screen) 10px; } .metiers-panel-search { display: block; margin: 0 20px 8px; } .metiers-panel-hint { margin: 0 20px 14px; font-size: 12px; line-height: 1.45; color: var(--muted-tag); } .resultats-header-row { padding-left: 20px; padding-right: 20px; } .screen-resultats .produits-search-label { display: block; margin: 0 20px 12px; padding: 0 2px; } .metiers-toolbar-search-row { display: flex; align-items: stretch; gap: 10px; width: 100%; } .metiers-filter-btn { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; padding: 0; color: var(--muted-tag); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .metiers-filter-btn:active { opacity: 0.92; } .metiers-filter-btn__icon { display: flex; align-items: center; justify-content: center; } .metiers-filter-btn--active { color: var(--accent-muted-text); border-color: var(--accent); background: var(--accent-light); } .metiers-filter-btn__dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-secondary); } /* Variante pleine largeur : doit écraser `width: 48px` du bouton compact (règle ci-dessus). */ .metiers-filter-btn.metiers-filter-btn--block { width: 100%; max-width: none; flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; gap: 10px; font-size: 14px; font-weight: 600; } .metiers-filter-btn--block .metiers-filter-btn__dot { position: static; margin-left: 6px; flex-shrink: 0; box-shadow: none; } .metiers-filter-btn__label { white-space: nowrap; } .metiers-filter-backdrop { position: fixed; inset: 0; z-index: 228; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .metiers-filter-backdrop.is-visible { opacity: 1; pointer-events: auto; } .metiers-filter-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 229; max-width: 480px; margin: 0 auto; padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; } .metiers-filter-sheet.is-visible { transform: translateY(0); pointer-events: auto; } .metiers-filter-sheet__panel { background: var(--bg-secondary); border-radius: 20px 20px 0 0; padding: 6px 20px 20px; border: 1px solid var(--border); border-bottom: none; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45); } .metiers-filter-sheet__handle { width: 40px; height: 4px; margin: 0 auto 12px; background: var(--btn-elevated); border-radius: 4px; } .metiers-filter-sheet__title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--text-primary); } .metiers-filter-sheet__hint { margin: 0 0 18px; font-size: 13px; line-height: 1.4; color: var(--muted-tag); } .metiers-filter-section { margin-bottom: 18px; } .metiers-filter-section__label { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted-tag); text-transform: uppercase; letter-spacing: 0.04em; } .metiers-filter-sort { display: flex; gap: 8px; } .metiers-filter-sort-btn { flex: 1 1 auto; padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted-tag); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .metiers-filter-sort-btn.is-active { color: var(--text-primary); background: rgba(255, 107, 53, 0.2); border-color: var(--accent); } .metiers-filter-hashtag-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; max-height: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .metiers-filter-hashtag-field { display: block; } .metiers-filter-hashtag-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .metiers-filter-hashtag-input::placeholder { color: var(--text-muted); } .metiers-filter-sheet__actions { display: flex; gap: 10px; margin-top: 8px; padding-top: 4px; } .metiers-filter-sheet__btn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; border-radius: var(--radius); cursor: pointer; border: none; } .metiers-filter-sheet__btn--ghost { color: var(--muted-tag); background: transparent; border: 1px solid var(--border); } .metiers-filter-sheet__btn--primary { color: var(--inverse-on-brand); background: var(--accent-cta); transition: background 0.2s ease; } .metiers-filter-sheet__btn--primary:hover { background: var(--accent-dark); } .metiers-filter-sheet__btn--primary:active { opacity: 0.92; } .metiers-search-wrap { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .metiers-search-icon { flex-shrink: 0; display: flex; color: var(--muted-tag); } .metiers-search-input { flex: 1 1 auto; min-width: 0; padding: 0; font: inherit; font-size: 15px; color: var(--text-primary); caret-color: var(--accent); background: transparent; border: none; outline: none; } .metiers-search-input::placeholder { color: var(--text-muted); } .metiers-search-wrap.metiers-search-wrap--flex { flex: 1 1 auto; min-width: 0; width: auto; } .metiers-cat-strip { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 6px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .metiers-cat-strip::-webkit-scrollbar { height: 4px; } .metiers-cat-strip::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; } .metier-cat-pill { flex: 0 0 auto; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-tag); white-space: nowrap; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .metier-cat-pill.is-active { background: var(--accent); color: var(--inverse-on-brand); border-color: var(--accent); } .metier-cat-pill:not(.is-active):active { background: var(--bg-card); } .screen-metiers .metiers-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .metiers-group { margin-bottom: 16px; } .metiers-group:last-child { margin-bottom: 0; } .metiers-cat-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-tag); } .metiers-chips { display: flex; flex-wrap: wrap; gap: 8px; } .metier-chip { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .metier-chip:active:not(.metier-chip--selected) { background: var(--bg-card); border-color: var(--accent); } .metier-chip--selected { background: var(--accent); color: var(--inverse-on-brand); border-color: var(--accent); } .metier-chip--selected:active { background: var(--accent-hover); border-color: var(--accent-hover); } .metiers-empty-filter { margin: 8px 0 0; font-size: 14px; color: var(--muted-tag); } .metiers-status { margin: 0 0 12px; font-size: 14px; color: var(--muted-tag); } .metiers-status.is-error { color: var(--danger); } /* Écrans recherche unifiés (artisans, produits, charité) */ .search-screen--resultats, .search-screen--produits, .search-screen--charite { display: flex; flex-direction: column; gap: 0; overflow: hidden; box-sizing: border-box; } .search-screen--resultats { padding-top: calc(8px + var(--safe-top)); } /* * Écrans recherche (mobile) : une seule zone scrollable — .search-screen__list-zone. * L’écran et .search-screen__main-scroll sont overflow: hidden (flex column). */ #screen-resultats.screen.active { box-sizing: border-box; overflow: hidden; } #screen-resultats-produits.screen.active, #screen-charite-recherche.screen.active { height: 100%; box-sizing: border-box; overflow: hidden; } #produits-main-scroll.search-screen__main-scroll { display: flex; } #screen-resultats #resultats-main-scroll.search-screen__main-scroll { display: flex; } #screen-charite-recherche #charite-main-scroll.search-screen__main-scroll { display: flex; } /* Padding bas liste : léger + safe (la tab bar est déjà réservée sur #main-content) */ #screen-resultats-produits #produits-list-zone.search-screen__list-zone { padding-bottom: var(--scroll-pad-bottom); } #screen-charite-recherche #charite-list-zone.search-screen__list-zone { padding-bottom: var(--scroll-pad-bottom); } .search-screen--produits { padding-top: calc(8px + var(--safe-top)); } .search-screen--charite { padding-top: calc(8px + var(--safe-top)); } .search-screen__main-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: hidden; display: flex; flex-direction: column; position: relative; padding-bottom: 0; } /* Scroll uniquement sur la liste — pas sur le conteneur principal */ #screen-resultats #resultats-main-scroll, #screen-resultats-produits #produits-main-scroll, #screen-charite-recherche #charite-main-scroll { flex: 1 1 auto; min-height: 0; } #resultats-list-zone.search-screen__list-zone, #produits-list-zone.search-screen__list-zone, #charite-list-zone.search-screen__list-zone { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #resultats-list-zone::-webkit-scrollbar, #produits-list-zone::-webkit-scrollbar, #charite-list-zone::-webkit-scrollbar { width: 5px; } #resultats-list-zone::-webkit-scrollbar-thumb, #produits-list-zone::-webkit-scrollbar-thumb, #charite-list-zone::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; } .search-screen__header { position: relative; z-index: 1; flex-shrink: 0; background: var(--header-scrim); border-bottom: 1px solid var(--hairline); padding: 0 16px 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; overflow: visible; } /* Résultats artisans / produits / solidarité : en-tête sticky (pas overflow:hidden) */ #screen-resultats .search-screen__header, #screen-resultats-produits .search-screen__header, #screen-charite-recherche .search-screen__header { position: sticky; top: 0; z-index: 100; max-height: 640px; overflow: visible; opacity: 1; transition: max-height 0.34s var(--ease-premium, ease), opacity 0.22s ease, padding 0.24s ease; } #screen-resultats .search-screen__header.search-screen__header--scroll-hidden, #screen-resultats-produits .search-screen__header.search-screen__header--scroll-hidden, #screen-charite-recherche .search-screen__header.search-screen__header--scroll-hidden { max-height: 0 !important; overflow: hidden; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; border-bottom-width: 0; pointer-events: none; } /* Refonte harmonisée : 3 lignes (recherche+Filtres · hashtags actifs · tri+compteur) */ .search-screen__header--unified { background: var(--bg-primary); border-bottom: 1px solid var(--border-subtle, var(--hairline)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); padding-bottom: 10px; } [data-theme='dark'] .search-screen__header--unified { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .search-header__unified { display: flex; flex-direction: column; gap: 8px; } .search-header__row--search .search-screen__chrome--header-only { max-height: none !important; overflow: visible; } #screen-resultats .search-header__unified .search-screen__chrome, #screen-resultats-produits .search-header__unified .search-screen__chrome, #screen-charite-recherche .search-header__unified .search-screen__chrome { max-height: none !important; } #screen-resultats .search-header__unified .lb-search__row, #screen-resultats-produits .search-header__unified .lb-search__row, #screen-charite-recherche .search-header__unified .lb-search__row { padding-left: 0; padding-right: 0; } #screen-resultats .search-header__unified .lb-search__field, #screen-resultats-produits .search-header__unified .lb-search__field, #screen-charite-recherche .search-header__unified .lb-search__field { background: var(--bg-secondary); border: 1px solid var(--border-subtle, var(--border)); border-radius: 12px; } .search-header__row--active-tags { min-height: 0; } .search-header__row--active-tags:has(.search-header__hashtag-active-strip:empty) { display: none; } .search-header__hashtag-active-strip { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 2px 0; scrollbar-width: none; } .search-header__hashtag-active-strip::-webkit-scrollbar { display: none; } .search-header__row--sort { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; } .search-header__sort-chips { flex: 1; min-width: 0; } .search-header__sort-spacer { flex: 1; min-width: 0; } .search-header__result-count { flex-shrink: 0; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); line-height: 1.2; } .search-header__charite-context { margin: 0 0 6px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text-secondary); } .metiers-filter-section--in-sheet .metiers-filter-section__label { margin-top: 0; } .search-shell__hashtags-block--in-sheet { max-height: min(42vh, 320px); overflow-x: hidden; overflow-y: auto; padding-bottom: 8px; margin-bottom: 4px; } .search-shell__hashtags-block--in-sheet .search-shell__hashtag-search-input { font-size: 13px; min-height: 40px; padding: 8px 12px; } .search-shell__hashtags-block--in-sheet .search-shell__hashtags { margin-top: 8px; } .search-screen__chrome { max-height: 140px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; } /* Distance sous la barre de recherche (+ slider) : ne pas couper le bloc */ #screen-resultats .search-screen__chrome, #screen-resultats-produits .search-screen__chrome, #screen-charite-recherche .search-screen__chrome { max-height: 260px; } .search-screen__distance-row { margin-top: 2px; padding: 0 0 6px; } .search-screen__header .lb-search__row { padding-left: 0; padding-right: 0; } .search-screen__header .search-screen__chrome .lb-search { margin-bottom: 0; } .search-screen__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; max-height: 36px; margin-top: 2px; } .search-screen__sort-row { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; } .search-screen__toolbar-spacer { flex: 1; } .search-screen__result-meta { flex-shrink: 0; margin: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); max-width: 48%; text-align: right; line-height: 1.2; } .search-screen__list-zone { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; } /* Indépendants (#screen-resultats) : pas de height: 100% sur la liste ; padding = barre du bas */ #screen-resultats #resultats-list-zone.search-screen__list-zone { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; padding-bottom: var(--scroll-pad-bottom-fab); } #screen-resultats #resultats-view-map { flex-shrink: 0; } /* Liste produits : le scroll est sur .search-screen__list-zone, pas sur .produits-scroll */ #screen-resultats-produits #produits-list-zone .produits-scroll--embedded { flex: 1 1 auto; min-height: 0; overflow: visible; -webkit-overflow-scrolling: auto; } .lb-search--charite .lb-search__surface { width: 100%; } .page-subtitle--charite-search { margin: 0 0 6px; font-size: 12px; line-height: 1.3; } .produits-count-badge--toolbar { background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; min-width: 0; padding: 0; } /* Écran résultats artisans */ .screen-resultats { gap: 0; } .screen-resultats__count-badge { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .search-screen__header > .nav-back { margin-bottom: 4px; } .resultats-sticky__title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .screen-resultats .search-screen__header .page-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; color: var(--text-primary); } .screen-resultats .page-subtitle--resultats { margin: 0 0 6px; font-size: 12px; line-height: 1.3; color: var(--text-secondary); } /* ——— Barre recherche type marketplace (résultats artisans & produits uniquement) ——— */ .lb-search { position: relative; z-index: 1; width: 100%; margin-bottom: 4px; } .lb-search__backdrop { position: fixed; inset: 0; z-index: 210; border: none; padding: 0; margin: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } [data-theme='light'] .lb-search__backdrop { background: rgba(0, 0, 0, 0.2); } .lb-search.is-open .lb-search__backdrop { opacity: 1; pointer-events: auto; } .lb-search__surface { position: relative; z-index: 211; width: 100%; } .lb-search.is-open .lb-search__surface { padding-bottom: 10px; background: var(--bg-primary); box-shadow: 0 1px 0 var(--border); } .lb-search__row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 16px; box-sizing: border-box; } .lb-search__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; min-height: 44px; padding: 0 14px; box-sizing: border-box; background: var(--bg-card); border: none; border-radius: 22px; touch-action: manipulation; } .lb-search__loupe { flex-shrink: 0; color: var(--text-secondary); opacity: 0.9; pointer-events: none; } .lb-search__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 15px; color: var(--text-primary); background: transparent; border: none; outline: none; -webkit-appearance: none; appearance: none; } .lb-search__input::placeholder { color: var(--muted-tag); } .lb-search__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 -6px 0 0; padding: 0; font: inherit; font-size: 22px; line-height: 1; color: var(--text-secondary); cursor: pointer; background: transparent; border: none; border-radius: 50%; transition: opacity 0.1s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .lb-search__close:active { opacity: 0.85; } .lb-search.is-open .lb-search__filters { display: none; } .lb-search__expand { padding: 10px 16px 0; max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: lb-search-expand-in 0.22s ease; } @keyframes lb-search-expand-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .lb-search__expand[hidden] { display: none !important; } html.lb-search-open { overflow: hidden; } .lb-search__recents { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .lb-search__recent-pill { flex: 0 0 auto; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-on-accent); background: var(--accent); border: none; border-radius: 999px; cursor: pointer; transition: opacity 0.1s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .lb-search__recent-pill:active { opacity: 0.88; } .screen-resultats-produits .produits-hashtags-block { padding: 0; } .screen-resultats #resultats-hashtags-block { padding: 0 16px 8px; } .lb-search.is-open { z-index: 220; } #resultats-found-line.search-screen__result-meta { margin: 0; } .resultats-sort-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; } .resultats-sort-chip { padding: 4px 12px; min-height: 32px; box-sizing: border-box; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-subtle, var(--border)); border-radius: 16px; cursor: pointer; flex: 0 0 auto; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .resultats-sort-chip.is-active { background: var(--brand, var(--accent-cta)); color: var(--inverse-on-brand, #fff); border-color: transparent; } .screen-resultats .search-shell__hashtags .filter-hashtag-pill.is-active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .resultats-ptr-indicator { pointer-events: none; position: absolute; left: 50%; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -20px; transform: translate3d(0, calc(var(--ptr-pull, 0px) - 36px), 0); opacity: 0; transition: opacity 0.15s ease; } .resultats-ptr-indicator.is-pulling, .resultats-ptr-indicator.is-refreshing { opacity: 1; } .resultats-ptr-spinner { display: block; width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: resultats-ptr-spin 0.7s linear infinite; } .resultats-ptr-indicator.is-refreshing .resultats-ptr-spinner { animation-duration: 0.55s; } @keyframes resultats-ptr-spin { to { transform: rotate(360deg); } } .resultats-status { margin: 0 0 10px; font-size: 14px; color: var(--muted-tag); } .resultats-status.is-error { color: var(--danger); } /* Liste artisans — scroll vertical sur #resultats-list-zone */ .artisans-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; flex: 0 0 auto; min-height: min-content; overflow: visible; display: flex; flex-direction: column; gap: 0; background: var(--bg-primary); } .artisan-card { flex: 0 0 auto; min-height: 88px; padding: 0; margin: 0; background: var(--bg-card); border: none; border-bottom: 1px solid var(--hairline); border-radius: 0; touch-action: manipulation; transition: opacity 0.12s var(--ease-premium); } .artisan-card:active { opacity: 0.92; } .artisan-skeleton-card { min-height: 88px; border-bottom: 1px solid var(--border); background: linear-gradient( 90deg, var(--bg-secondary) 0%, var(--bg-card) 50%, var(--bg-secondary) 100% ); background-size: 200% 100%; animation: lazone-skeleton-shimmer 1.1s ease-in-out infinite; } @keyframes lazone-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .artisan-avatar__placeholder-svg { display: block; width: 100%; height: 100%; border-radius: 12px; } .artisan-card:last-child { border-bottom: none; } .artisan-card--clickable:active { opacity: 0.7; } .artisan-card__inner { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 88px; padding: 16px; box-sizing: border-box; } .artisan-card__contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 14px; box-sizing: border-box; } .artisan-card__contact-row--plain { font-size: 14px; font-weight: 600; color: var(--text-primary); } .artisan-card__contact-btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 24px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; border: none; border-radius: 12px; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .artisan-card__contact-btn--call { background: var(--accent); } .artisan-card__contact-btn--wa { background: #25d366; } .artisan-card__contact-btn:disabled { opacity: 0.45; cursor: not-allowed; } .artisan-card__contact-btn:not(:disabled):active { opacity: 0.9; transform: scale(0.99); } .artisan-card__dispo { position: absolute; top: 10px; right: 12px; padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--inverse-on-brand); background: var(--success); border-radius: 6px; line-height: 1.2; } .artisan-avatar { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 16px; font-weight: 700; color: var(--accent); background: var(--accent-light); border-radius: 50%; box-sizing: border-box; } .artisan-avatar--ring-premium { border: 2px solid var(--accent); } .artisan-avatar--ring-verified { border: 2px solid var(--success); } .artisan-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; } .artisan-card__center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 72px; } .artisan-name { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.3px; } .artisan-metier-line { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-secondary); } .artisan-loc-line { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-secondary); } .artisan-card__inner:has(.artisan-card__dispo) .artisan-card__right { padding-top: 18px; } .artisan-card__right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; min-width: 72px; text-align: right; } .artisan-card__rating-block { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 6px; } .artisan-stars { font-size: 11px; color: var(--star); letter-spacing: 0.5px; line-height: 1.2; } .artisan-note--accent { font-size: 14px; font-weight: 700; color: var(--accent); } .artisan-avis { font-size: 11px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; } .artisan-card__badge-verified { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--inverse-on-brand); background: var(--success); border-radius: 4px; } .artisan-badges { display: flex; flex-wrap: wrap; gap: 4px; } .artisan-badge { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 6px; } .artisan-badge--verified { color: var(--bg); background: var(--badge); } .artisan-badge--boost { color: var(--text-on-accent); background: var(--accent); } .artisan-badge--premium { color: var(--text-on-accent); background: var(--star); } .artisan-meta { margin: 0; font-size: 13px; color: var(--muted-tag); line-height: 1.35; } .artisan-rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } .artisan-note { font-weight: 600; color: var(--text); } .artisan-dist { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--success); } .artisan-phone { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: 2px; color: var(--inverse-on-brand); background: var(--accent); border-radius: 50%; text-decoration: none; transition: opacity 0.2s ease, transform 0.15s ease; } .artisan-phone:active { opacity: 0.85; transform: scale(0.96); } .artisan-phone svg { display: block; } .artisan-card--enter { animation: artisan-card-enter 200ms ease-out forwards; animation-delay: var(--enter-delay, 0ms); opacity: 0; } @keyframes artisan-card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .artisan-card--enter { animation: none; opacity: 1; transform: none; } } .artisans-empty-state { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px; text-align: center; } .artisans-empty-state[hidden] { display: none !important; } .artisans-empty-state__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-secondary); max-width: 320px; } .artisans-widen-btn { padding: 12px 22px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-on-accent); background: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; transition: opacity 0.2s ease; } .artisans-widen-btn:active { opacity: 0.88; } .artisans-share-btn { padding: 12px 22px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-on-accent); background: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; transition: opacity 0.2s ease; } .artisans-share-btn--ghost { color: var(--text-secondary); background: transparent; border: 1px solid var(--border); } .artisans-share-btn:active { opacity: 0.88; } .util-star { color: var(--star); } .util-badge { display: inline-block; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; color: var(--bg); background: var(--badge); border-radius: 999px; } /* ——— Profil artisan ——— */ #screen-profil-artisan.screen.active { animation: lazone-profil-slide-in 280ms cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes lazone-profil-slide-in { from { transform: translateX(min(28px, 8vw)); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { #screen-profil-artisan.screen.active { animation: none; } } .screen-profil-artisan { display: flex; flex-direction: column; overflow: hidden; padding-top: calc(12px + var(--safe-top)); will-change: scroll-position; } .profil-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; gap: 8px; } .profil-topbar-actions { display: flex; align-items: center; gap: 4px; } .profil-icon-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 1; color: var(--accent); background: rgba(255, 107, 53, 0.12); border: none; border-radius: 12px; cursor: pointer; transition: opacity 0.2s ease; } .profil-icon-btn:active { opacity: 0.85; } #btn-menu.profil-icon-btn { font-size: 22px; font-weight: 700; letter-spacing: 0; } .profil-hero--owner .profil-badges, .profil-hero--owner .profil-rating { display: none !important; } .profil-panel--owner[hidden], .profil-panel--visitor[hidden] { display: none !important; } .profil-stats { display: flex; gap: 10px; justify-content: space-between; margin: 0 0 8px; } #section-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .profil-stat-card { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } .profil-stat-card__icon { font-size: 18px; line-height: 1; } .profil-stat-card__value { font-size: 20px; font-weight: 800; color: var(--text-primary); } .profil-stat-card__label { font-size: 11px; font-weight: 600; color: var(--muted-tag); text-transform: uppercase; letter-spacing: 0.04em; } /* Mercis (feature masquée) : renforcer [hidden] face à .profil-stat-card { display: flex } */ .profil-stat-card[hidden] { display: none !important; } .profil-search-prestation-input { box-sizing: border-box; width: 100%; margin-bottom: 12px; padding: 10px 14px; font: inherit; font-size: 13px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; } .profil-search-prestation-input::placeholder { color: var(--muted-tag); } .profil-stats-hint { margin: 0 0 20px; font-size: 12px; color: var(--muted-tag); text-align: center; opacity: 0.85; } .profil-owner-tabs-wrap { margin-top: 4px; } .profil-owner-tabs { display: flex; gap: 6px; margin: 0 0 16px; padding: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius); } .profil-owner-tab { flex: 1 1 0; padding: 10px 8px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: transparent; border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .profil-owner-tab.is-active { color: var(--text-primary); background: rgba(255, 107, 53, 0.22); box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.35); } .profil-owner-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .profil-owner-tabpane { min-height: 120px; } .profil-owner-tabpane[hidden] { display: none !important; } .profil-portfolio-save, .profil-certifications-save { width: 100%; margin-top: 16px; } .profil-cert-edit-list { margin: 0 0 12px; padding: 0; list-style: none; } .profil-cert-edit-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .profil-cert-edit-list__remove { flex-shrink: 0; width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; color: var(--muted); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .profil-cert-edit-list__remove:active { opacity: 0.85; } .profil-cert-form { margin-bottom: 12px; padding: 14px; background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border); border-radius: 12px; } .profil-cert-form[hidden] { display: none !important; } #profil-cert-add-btn { width: 100%; margin-bottom: 8px; } .profil-visiteur-liens { margin: 12px 0 16px; } .profil-visiteur-liens[hidden] { display: none !important; } .profil-visiteur-liens__title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .profil-visiteur-liens__row { display: flex; flex-wrap: wrap; gap: 8px; } .profil-visiteur-lien { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.28); border-radius: 10px; } .profil-visiteur-lien:active { opacity: 0.88; } .profil-portfolio-liens-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .profil-portfolio-liens-pills[hidden] { display: none !important; } .profil-portfolio-link-pill { display: inline-flex; align-items: center; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; background: rgba(255, 107, 53, 0.08); border: 1px solid rgba(255, 107, 53, 0.28); border-radius: 999px; } .profil-portfolio-link-pill:active { opacity: 0.88; } .profil-siret-verif-badge { display: inline-flex; align-items: center; margin: 0 20px 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--accent); background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: 10px; } .profil-siret-verif-badge[hidden] { display: none !important; } .profil-infos-hashtags-block { margin-top: 12px; } .profil-infos-hashtags-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .profil-hashtags--infos-tab[hidden] { display: none !important; } .profil-prestations-section { margin: 16px 0 8px; } .profil-prestations-section--standalone { margin: 0 20px 16px; padding: 0; } .profil-prestations-after-tabs { margin-top: 8px; } .profil-prestations-section[hidden] { display: none !important; } .profil-prestations-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; } .profil-prestation-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 10px; overflow: hidden; } .profil-prestation-card__img { display: block; width: 100%; height: 120px; margin: 0 0 10px; object-fit: cover; border-radius: 8px; background: var(--bg-raised); } .profil-prestation-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .profil-prestation-card__title { margin: 0; flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.35; } .profil-prestation-card__tarif { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; } .profil-prestation-card__desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted-tag); } .profil-prestations-search { width: 100%; margin: 0 0 12px; padding: 10px 14px; font: inherit; font-size: 13px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-sizing: border-box; } .profil-prestations-search::placeholder { color: var(--muted-tag); } .profil-prestations-owner-list { margin: 0 0 12px; padding: 0; list-style: none; } .profil-prestations-owner-list li.profil-prestation-owner-card { position: relative; display: block; margin-bottom: 12px; padding: 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .profil-prestation-owner-card > .profil-prestation-card__img { margin-top: 0; } .profil-prestation-owner-card__body { width: 100%; padding-right: 48px; box-sizing: border-box; } .profil-prestations-owner-list__del { position: absolute; top: 8px; right: 8px; z-index: 2; width: 40px; height: 40px; padding: 0; font-size: 16px; line-height: 1; font-weight: 700; color: var(--danger); background: rgba(255, 80, 80, 0.12); border: 1px solid rgba(255, 107, 107, 0.45); border-radius: 10px; cursor: pointer; } .profil-prestations-owner-list__del:active { opacity: 0.85; } .profil-prestation-photo-preview { margin-bottom: 12px; } .profil-prestation-photo-preview[hidden] { display: none !important; } .profil-prestation-preview-img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--bg-raised); } .profil-prestation-upload-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; padding: 14px; min-height: 48px; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--bg-card); border: 1px dashed var(--accent); border-radius: 12px; cursor: pointer; transition: opacity 0.15s ease; } .profil-prestation-upload-label:active { opacity: 0.9; } .profil-prestation-form .profil-prestation-upload-label__text { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--text-secondary); } .profil-prestation-form { margin-bottom: 12px; padding: 14px; background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border); border-radius: 12px; } .profil-prestation-form[hidden] { display: none !important; } .profil-prestation-prix-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 4px; } .profil-prestation-prix-row .inscription-input { flex: 1 1 auto; min-width: 0; } .profil-prestation-tarif-select { flex: 0 0 auto; min-width: 120px; } .inscription-textarea { display: block; width: 100%; min-height: 72px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text-primary); caret-color: var(--accent); background: var(--card); border: 1px solid var(--border); border-radius: 12px; resize: vertical; } .inscription-textarea::placeholder { color: var(--muted); } .profil-badge--cert { text-transform: none; letter-spacing: 0.03em; font-size: 9px; line-height: 1.25; max-width: 168px; white-space: normal; text-align: center; background: rgba(93, 202, 165, 0.16); color: var(--success); border: 1px solid rgba(93, 202, 165, 0.45); } .profil-owner-section { margin-bottom: 24px; } .profil-owner-head { margin-bottom: 10px; } .profil-metiers-list { margin: 0 0 12px; padding: 0; list-style: none; } .profil-metiers-list li.profil-metier-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .profil-metier-row__main { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .profil-metier-row__icon { flex-shrink: 0; font-size: 22px; line-height: 1; } .profil-metier-row__nom { min-width: 0; font-weight: 600; } .profil-metier-delete { flex-shrink: 0; width: 40px; height: 40px; padding: 0; font-size: 16px; line-height: 1; font-weight: 700; color: var(--danger); background: rgba(255, 80, 80, 0.1); border: 1px solid rgba(255, 107, 107, 0.45); border-radius: 10px; cursor: pointer; transition: opacity 0.15s ease; } .profil-metier-delete:active { opacity: 0.85; } .profil-add-metier { margin-top: 8px; } .profil-add-metier__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .profil-add-metier-select { width: 100%; padding: 14px 16px; font: inherit; font-size: 15px; color: var(--text-primary); background: var(--card); border: 1px solid var(--border); border-radius: 12px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; cursor: pointer; } .profil-btn-secondary { display: block; width: 100%; margin-top: 12px; padding: 14px 18px; font: inherit; font-size: 15px; font-weight: 700; color: var(--accent); background: transparent; border: 2px solid var(--accent); border-radius: var(--radius); cursor: pointer; } .profil-btn-delete { display: block; width: 100%; margin-top: 8px; margin-bottom: 32px; padding: 14px 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--danger); background: transparent; border: 2px solid var(--danger); border-radius: var(--radius); cursor: pointer; } .profil-btn-delete:active { background: rgba(255, 107, 107, 0.1); } .profil-share-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--accent); background: none; border: none; border-radius: 12px; cursor: pointer; transition: opacity 0.2s ease; } .profil-share-icon:active { opacity: 0.7; } .profil-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 0; } .profil-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 12px 20px; } .profil-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 28px; font-weight: 700; color: var(--accent); background: var(--accent-light); margin-bottom: 14px; } .profil-avatar__img { width: 100%; height: 100%; object-fit: cover; } .profil-hero-avatar, .profil-avatar-img, img.profil-avatar__img, img.pu-avatar--img { width: 80px !important; height: 80px !important; border-radius: 50%; object-fit: cover; display: block; background: transparent; } .profil-avatar--editable { cursor: pointer; outline: none; transition: box-shadow 0.15s ease, transform 0.12s ease; } .profil-avatar--editable:focus-visible { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.45); } .profil-avatar--editable:active { transform: scale(0.98); } .profil-avatar-input { display: none; } .profil-nom { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.25; } .profil-metiers-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; max-width: 100%; padding: 0 4px; } .profil-metiers-pills[hidden] { display: none !important; } .profil-metier-pill { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--accent); background: rgba(255, 107, 53, 0.14); border: 1px solid rgba(255, 107, 53, 0.4); border-radius: 999px; line-height: 1.3; } .profil-meta { margin: 8px 0 0; font-size: 15px; color: var(--muted-tag); line-height: 1.4; max-width: 320px; } .profil-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .profil-badge { padding: 4px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; border-radius: 6px; } .profil-badge--verif { color: var(--bg); background: var(--badge); } .profil-badge--boost { color: var(--text-on-accent); background: var(--accent); } .profil-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 15px; } .profil-rating .profil-stars { color: var(--star); letter-spacing: 1px; } .profil-rating .profil-note-num { font-weight: 700; color: var(--text-primary); } .profil-rating .profil-avis-count { color: var(--muted-tag); } .profil-signaler-wrap { display: flex; justify-content: center; margin-top: 8px; } .profil-signaler-wrap[hidden] { display: none !important; } .profil-signaler-link { padding: 4px 8px; border: none; background: none; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; } .profil-signaler-link:active { opacity: 1; } .profil-hero-edit-link { margin-top: 14px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.35); border-radius: 999px; cursor: pointer; align-self: center; max-width: 100%; transition: background 0.15s ease, border-color 0.15s ease; } .profil-hero-edit-link:hover { background: rgba(255, 107, 53, 0.16); } .profil-hero-edit-link:active { transform: scale(0.99); } #section-gestion.profil-gestion--highlight { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); transition: outline 0.2s ease; } .profil-contact-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; width: calc(100% - 40px); max-width: 440px; margin: 0 auto 20px; } .profil-contact-btn { flex: 1 1 140px; min-height: 48px; padding: 12px 24px; font: inherit; font-size: 15px; font-weight: 600; color: #fff; border: none; border-radius: 12px; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .profil-contact-btn--call { background: var(--accent); } .profil-contact-btn--wa { background: #25d366; } .profil-contact-btn:disabled { opacity: 0.45; cursor: not-allowed; } .profil-contact-btn:not(:disabled):active { opacity: 0.9; transform: scale(0.99); } .profil-infos-card { margin: 0 var(--space-screen) 20px; padding: var(--space-screen); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .profil-section-title { margin: 0 0 12px; font-size: var(--font-section); font-weight: var(--font-section-weight); color: var(--text-primary); } .profil-text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; } #profil-description, #profil-owner-description { word-break: break-word; overflow-wrap: break-word; } .profil-text:last-child { margin-bottom: 0; } .profil-text--muted { color: var(--muted-tag); font-size: 13px; } .profil-avis-block { margin: 0 20px 32px; } .profil-avis-empty { margin: 0 0 14px; font-size: 14px; color: var(--muted-tag); text-align: center; } .profil-avis-empty[hidden] { display: none !important; } .profil-laisser-avis { display: block; width: 100%; padding: 14px 20px; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: transparent; border: 2px solid var(--accent); border-radius: var(--radius); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .profil-laisser-avis:active { background: rgba(255, 107, 53, 0.12); } .profil-avis-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .profil-avis-item { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.03); } .profil-avis-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; } .profil-avis-item__stars { letter-spacing: 1px; font-size: 14px; } .profil-avis-item__meta { font-size: 12px; color: var(--muted-tag); } .profil-avis-item__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-primary); } .profil-avis-list-error { margin: 0 0 12px; font-size: 13px; color: #f87171; } .screen-laisser-avis .laisser-avis__title { flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 700; } .laisser-avis__scroll { padding: 16px 20px 32px; max-width: 560px; margin: 0 auto; } .laisser-avis__intro { margin: 0 0 20px; font-size: 15px; color: var(--text-secondary); line-height: 1.45; } .laisser-avis__fieldset { border: none; margin: 0 0 20px; padding: 0; } .laisser-avis-stars { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .laisser-avis-star { cursor: pointer; margin: 0; } .laisser-avis-star__ui { display: block; font-size: 32px; line-height: 1; color: #fbbf24; opacity: 0.28; transition: opacity 0.15s ease; } .laisser-avis-star.is-on .laisser-avis-star__ui { opacity: 1; } .laisser-avis-textarea { width: 100%; min-height: 100px; resize: vertical; margin-bottom: 6px; } .laisser-avis-counter { margin: 0 0 20px; font-size: 12px; color: var(--muted-tag); text-align: right; } .artisan-card--clickable { cursor: pointer; } .artisan-card--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ——— Inscription artisan ——— */ .screen-inscription-artisan { gap: 0; overflow: hidden; } .inscription-profile-rejoin { margin: 0 0 8px; padding: 10px 14px; font-size: 14px; font-weight: 700; font-family: inherit; color: var(--success); text-align: center; background: rgba(93, 202, 165, 0.12); border: none; border-radius: 12px; width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity 0.15s ease, transform 0.12s ease; } .inscription-profile-rejoin:active { opacity: 0.92; transform: scale(0.99); } .inscription-profile-rejoin[hidden] { display: none !important; } .inscription-main-title { margin: 4px 0 0; font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .inscription-lede { margin: 0 0 8px; padding: 0; font-size: 13px; font-family: inherit; font-weight: 500; color: var(--success); text-align: left; background: none; border: none; width: 100%; cursor: pointer; display: block; -webkit-appearance: none; appearance: none; text-decoration: underline; text-decoration-color: rgba(93, 202, 165, 0.45); text-underline-offset: 3px; transition: opacity 0.15s ease; } .inscription-lede:active { opacity: 0.85; } .inscription-connecte-banner { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); } .inscription-connecte-banner__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); } .inscription-branch-card { margin-bottom: 16px; padding: 14px 16px; background: rgba(255, 107, 53, 0.08); border: 1px solid rgba(255, 107, 53, 0.28); border-radius: var(--radius); } .inscription-branch-card__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); } .inscription-branch-card__text { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); } .inscription-branch-card__btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--card); border: 1px solid var(--accent); border-radius: 12px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .inscription-branch-card__btn:hover { background: rgba(255, 107, 53, 0.12); } .inscription-branch-card__btn:active { transform: scale(0.99); } .inscription-hashtags-lede { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); } .inscription-optional { font-weight: 500; color: var(--muted-tag); } .inscription-perms-card { margin-bottom: var(--space-screen); padding: var(--space-screen); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .inscription-perms-card__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text-primary); } .inscription-perms-card__intro { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); } .inscription-perms-card__list { margin: 0 0 12px; padding-left: 1.1rem; font-size: 13px; line-height: 1.45; color: var(--text-secondary); } .inscription-perms-card__list li { margin-bottom: 6px; } .inscription-perms-card__list strong { color: var(--text-primary); } .inscription-fiche-publique-card { margin-top: 6px; } .inscription-perms-gps-btn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-on-accent); background: var(--accent); border: none; border-radius: 12px; cursor: pointer; transition: opacity 0.15s ease; } .inscription-perms-gps-btn:active { opacity: 0.92; } .inscription-perms-gps-status { margin: 10px 0 0; min-height: 1.2em; font-size: 12px; line-height: 1.35; color: var(--success); } .inscription-photo-block { margin-bottom: 4px; scroll-margin-top: 12px; } .inscription-photo-block .inscription-label { margin-top: 0; } .inscription-avatar-row { display: flex; align-items: flex-start; gap: 14px; margin-top: 8px; } .inscription-avatar-circle { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--bg-secondary); border: 2px dashed var(--border); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .inscription-avatar-circle--readonly { width: 48px; height: 48px; border-style: solid; pointer-events: none; } .inscription-avatar-circle--readonly .inscription-avatar-placeholder { font-size: 20px; } .inscription-avatar-placeholder { font-size: 32px; line-height: 1; user-select: none; } .inscription-avatar-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .inscription-avatar-meta { flex: 1; min-width: 0; } .inscription-photo-hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); } .inscription-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .inscription-photo-action-btn { flex: 1 1 auto; min-width: 120px; padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .inscription-photo-action-btn:hover { border-color: var(--accent); } .inscription-photo-action-btn:active { transform: scale(0.99); } .inscription-photo-remove { margin-top: 10px; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .inscription-photo-remove:hover { opacity: 0.9; } .inscription-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--scroll-pad-bottom); } .poster-form { padding-bottom: var(--scroll-pad-bottom); } /* Tab bar : marge bas sur zones scroll (profil artisan) */ .screen-profil-artisan .profil-scroll { padding-bottom: var(--scroll-pad-bottom-fab); } .inscription-form { display: flex; flex-direction: column; gap: 6px; } .inscription-label { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--muted); } .inscription-label:first-of-type { margin-top: 0; } .inscription-input, .inscription-select { width: 100%; padding: 16px; font: inherit; font-size: 16px; color: var(--text-primary); caret-color: var(--accent); background: var(--card); border: 1px solid var(--border); border-radius: 12px; outline: none; } .inscription-input::placeholder { color: var(--muted-tag); } .inscription-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; cursor: pointer; } .inscription-error { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--danger); } .inscription-error[hidden] { display: none !important; } .inscription-submit { display: block; width: 100%; margin-top: 20px; height: 56px; padding: 0 20px; font: inherit; font-size: 16px; font-weight: 700; color: var(--inverse-on-brand); background: var(--accent-cta); border: none; border-radius: 16px; cursor: pointer; transition: opacity 0.2s ease, background 0.2s ease; } .inscription-submit:disabled { opacity: 0.55; cursor: not-allowed; } .inscription-submit:hover:not(:disabled) { background: var(--accent-dark); } .inscription-submit:active:not(:disabled) { opacity: 0.9; } .inscription-switch { margin: 0 0 8px; text-align: center; } .inscription-switch-link { padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .inscription-switch-link:active { opacity: 0.85; } .screen-connexion .inscription-scroll { padding: 0 20px var(--scroll-pad-bottom); } .connexion-main-title { text-align: center; margin-bottom: 8px; } .connexion-subtitle { margin: 0 20px 16px; text-align: center; font-size: 15px; color: var(--text-secondary); line-height: 1.4; } /* Connexion Google (fond clair, bordure discrète) */ .auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 400px; margin: 0 auto 12px; padding: 12px 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-primary); background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; box-sizing: border-box; transition: background 0.2s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; } .auth-google-btn:active { background: var(--bg-secondary); } .auth-google-btn__logo { flex-shrink: 0; } .auth-google-btn__label { color: var(--text-primary); opacity: 0.92; } .auth-google-sep { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 13px; color: var(--text-muted); } .auth-google-sep::before, .auth-google-sep::after { content: ''; flex: 1; height: 1px; background: var(--hairline); } .auth-google-sep span { flex-shrink: 0; } .auth-google-sep--onboarding { margin-bottom: 14px; } .connexion-submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; } .connexion-submit-btn.is-loading { pointer-events: none; } .connexion-submit__spinner { display: none; width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--inverse-on-brand); border-right-color: transparent; border-radius: 50%; opacity: 0.9; animation: connexion-submit-spin 0.65s linear infinite; } .connexion-submit-btn.is-loading .connexion-submit__spinner { display: block; } @keyframes connexion-submit-spin { to { transform: rotate(360deg); } } .connexion-forgot-placeholder { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--text-muted); } .onboarding-connexion-hint { margin: 16px 0 0; text-align: center; } .onboarding-accueil-hint { margin: 12px 0 0; text-align: center; } .onboarding-link-connexion { padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .onboarding-link-connexion:active { opacity: 0.88; } .connexion-password-wrap { position: relative; width: 100%; } .connexion-password-wrap .inscription-input { padding-right: 52px; } .connexion-mdp-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 8px; font-size: 18px; line-height: 1; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; } .connexion-switch { margin: 20px 0 0; text-align: center; } .connexion-switch-link { padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .connexion-switch-link:active { opacity: 0.85; } .connexion-error-below { margin-top: 12px; } .inscription-success-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 8px 32px; } .inscription-success-panel[hidden] { display: none !important; } .inscription-success-title { margin: 0 0 12px; font-size: var(--font-section); font-weight: var(--font-section-weight); color: var(--success); line-height: 1.35; } .inscription-success-emoji { margin-right: 6px; } .inscription-success-name { margin: 0 0 24px; font-size: 17px; font-weight: 600; color: var(--badge); } .inscription-success-panel .inscription-submit + .profil-btn-secondary, .inscription-success-panel .profil-btn-secondary + .profil-btn-secondary { margin-top: 12px; width: 100%; max-width: 320px; } .inscription-success-panel .inscription-submit + .inscription-success-hint { margin-top: 16px; } .inscription-success-hint + .profil-btn-secondary { margin-top: 10px; } .inscription-success-hint { margin: 0 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); max-width: 320px; } .inscription-success-btn-caption { margin: 6px auto 14px; font-size: 12px; line-height: 1.35; color: var(--muted-tag); text-align: center; max-width: 320px; } .inscription-success-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--warm-text); max-width: 320px; } /* Après publication : masquer le bruit du formulaire (permissions, liens…) */ .screen-inscription-artisan.screen-inscription-artisan--success #inscription-perms-card, .screen-inscription-artisan.screen-inscription-artisan--success .inscription-switch, .screen-inscription-artisan.screen-inscription-artisan--success #inscription-lede, .screen-inscription-artisan.screen-inscription-artisan--success #inscription-profile-rejoin { display: none !important; } .screen-inscription-artisan.screen-inscription-artisan--success .inscription-main-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; opacity: 0.92; } #inscription-form-panel[hidden] { display: none !important; } /* Bottom sheet menu profil */ .profil-sheet-backdrop { position: fixed; inset: 0; z-index: 240; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .profil-sheet-backdrop.is-visible { opacity: 1; pointer-events: auto; } .profil-owner-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 241; max-width: 480px; margin: 0 auto; padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; } .profil-owner-sheet.is-visible { transform: translateY(0); pointer-events: auto; } .profil-owner-sheet__panel { background: var(--bg-secondary); border-radius: 20px 20px 0 0; padding: 8px 0 16px; border: 1px solid var(--border); border-bottom: none; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45); } .profil-owner-sheet__title { margin: 0; padding: 8px 20px 12px; font-size: 13px; font-weight: 600; color: var(--muted-tag); text-transform: uppercase; letter-spacing: 0.06em; } .profil-sheet__row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 20px; font: inherit; font-size: 16px; font-weight: 500; color: var(--text-primary); text-align: left; background: none; border: none; cursor: pointer; transition: background 0.15s ease; } .profil-sheet__row:active { background: rgba(255, 255, 255, 0.06); } .profil-sheet__row-icon { flex-shrink: 0; width: 28px; text-align: center; font-size: 18px; } .profil-sheet__row-text { flex: 1; line-height: 1.35; } .profil-sheet__sep { height: 1px; margin: 8px 20px; background: var(--border); } .profil-sheet__row--danger .profil-sheet__row-text { color: var(--danger); } .profil-sheet__row--danger .profil-sheet__row-icon { filter: none; } /* Dialog suppression */ .profil-delete-dialog { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; } .profil-delete-dialog[hidden] { display: none !important; } .profil-delete-dialog__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); } .profil-delete-dialog__panel { position: relative; width: 100%; max-width: 340px; padding: 22px 20px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } .profil-delete-dialog__message { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--text); } .profil-delete-dialog__mdp-wrap { margin-bottom: 10px; } .profil-delete-dialog__mdp-input { background: var(--bg-primary) !important; color: var(--text-primary); border: 1px solid var(--border); } .profil-delete-dialog__mdp-input:-webkit-autofill, .profil-delete-dialog__mdp-input:-webkit-autofill:hover, .profil-delete-dialog__mdp-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); box-shadow: 0 0 0 1000px var(--bg-primary) inset; transition: background-color 99999s ease-out; } .profil-delete-dialog__mdp-toggle { z-index: 1; } .profil-delete-dialog__error { margin: 0 0 12px; } .profil-delete-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .profil-delete-dialog__btn { padding: 12px 16px; font: inherit; font-size: 15px; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; transition: opacity 0.2s ease; } .profil-delete-dialog__btn--cancel { color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); } .profil-delete-dialog__btn--confirm { color: var(--inverse-on-brand); background: var(--danger); } .profil-delete-dialog__btn:active { opacity: 0.88; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .metiers-mode-tabs { display: flex; gap: 8px; margin: 0 20px 16px; padding: 4px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .metiers-mode-tab { flex: 1; padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted-tag); background: transparent; border: none; border-radius: 10px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .metiers-mode-tab.is-active { color: var(--text-primary); background: var(--border); } .metiers-mode-tabs--three .metiers-mode-tab { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 12px; line-height: 1.2; } .metiers-panel--nom { padding: 0 20px 20px; } .metiers-panel--prestation { padding: 0 20px 20px; } .metiers-search-input--prestation { box-sizing: border-box; width: 100%; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .metiers-prestation-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted-tag); } .produits-bientot-card { margin: 20px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; } .produits-bientot-text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--border); } .produits-bientot-text:last-child { margin-bottom: 0; } .produits-bientot-text--muted { font-size: 14px; color: var(--muted-tag); } .metiers-nom-search-label { display: block; } .metiers-nom-search-label .metiers-search-input--nom { box-sizing: border-box; width: 100%; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .resultats-search-wrap { padding: 0 20px 12px; } .resultats-search-label { display: block; } .resultats-search-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .resultats-search-input::placeholder { color: var(--muted-tag); } .resultats-search-prestation { box-sizing: border-box; width: 100%; margin-bottom: 12px; padding: 10px 14px; font: inherit; font-size: 13px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; } .resultats-search-prestation::placeholder { color: var(--muted-tag); } .resultats-hashtag-bar { padding: 0 20px 12px; } .resultats-hashtag-label, .produits-hashtag-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted-tag); } .resultats-hashtag-pills { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 10px; margin: 0 -4px; padding-left: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .produits-hashtag-pills, .hashtag-pills-row, .search-hashtag-pills { padding: 4px 16px; overflow-x: auto; display: flex; flex-wrap: wrap; gap: 8px; } .resultats-hashtag-pills::-webkit-scrollbar, .produits-hashtag-pills::-webkit-scrollbar { height: 4px; } .resultats-hashtag-pills::-webkit-scrollbar-thumb, .produits-hashtag-pills::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } .resultats-hashtag-pills::-webkit-scrollbar-track, .produits-hashtag-pills::-webkit-scrollbar-track { background: transparent; } .filter-hashtag-pill { flex: 0 0 auto; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted-tag); white-space: nowrap; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .filter-hashtag-pill:focus { outline: none; } .filter-hashtag-pill:focus-visible { box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.45); } .filter-hashtag-pill.is-active { background: rgba(255, 107, 53, 0.22); color: var(--accent-muted-text); border-color: var(--accent); } .filter-hashtag-pill.filter-hashtag-pill--user-recent { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.35); } .filter-hashtag-pill.filter-hashtag-pill--user-recent.is-active { box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.55), 0 0 0 2px rgba(255, 107, 53, 0.25); } .hashtags-recents-label { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; } .hashtags-recents-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .hashtag-pill--recent-pick { padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; background: rgba(255, 107, 53, 0.125); border: 1px solid var(--accent); color: var(--accent); } .resultats-hashtag-input-wrap, .produits-hashtag-input-wrap { display: block; } .resultats-hashtag-input, .produits-hashtag-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font: inherit; font-size: 13px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; } .resultats-hashtag-input::placeholder, .produits-hashtag-input::placeholder { color: var(--muted-tag); } .produits-hashtag-bar { margin: 0 20px 12px; } .profil-main-actions { margin-bottom: 4px; } .profil-modifier-main { display: none; width: calc(100% - 40px); max-width: 440px; margin: 0 auto 20px; height: 56px; padding: 0 20px; font: inherit; font-size: 18px; font-weight: 700; color: var(--inverse-on-brand); background: var(--accent); border: none; border-radius: 16px; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .profil-modifier-main:active { opacity: 0.9; transform: scale(0.99); } .profil-certifications-visiteur { margin: 0 20px 16px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; } .profil-cert-visiteur-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); } .profil-cert-visiteur-row:last-child { border-bottom: none; padding-bottom: 0; } .profil-cert-visiteur-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; } .profil-cert-doc-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; background: transparent; border: 2px solid var(--accent); border-radius: 12px; cursor: pointer; transition: opacity 0.2s ease, background 0.2s ease; } .profil-cert-doc-btn:hover { background: rgba(255, 107, 53, 0.12); } .screen-prestation-detail { display: flex; flex-direction: column; min-height: 100%; } .prestation-detail-scroll { flex: 1; overflow-y: auto; padding-bottom: 24px; } .prestation-detail-img-wrap { width: 100%; height: 220px; overflow: hidden; background: var(--bg-secondary); } .prestation-detail-image { display: block; width: 100%; height: 220px; object-fit: cover; cursor: pointer; touch-action: manipulation; } .prestation-detail-inner { padding: 16px 20px 24px; } .prestation-detail-titre { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.25; } .prestation-detail-desc { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); } .prestation-detail-tarif { margin: 0 0 20px; font-size: 18px; font-weight: 700; color: var(--accent); } .prestation-detail-contact { display: block; width: 100%; height: 56px; padding: 0 20px; font: inherit; font-size: 18px; font-weight: 700; color: var(--inverse-on-brand); background: var(--accent); border: none; border-radius: 16px; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .prestation-detail-contact:active { opacity: 0.9; transform: scale(0.99); } .profil-cert-file-input { width: 100%; margin-bottom: 12px; font-size: 14px; color: var(--text); } /* ——— Annonces produits ——— */ .produits-header-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .produits-page-title { margin: 0; font-size: var(--font-section); font-weight: var(--font-section-weight); color: var(--text-primary); } .produits-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: var(--inverse-on-brand); background: var(--accent); border-radius: 999px; } .produits-search-label { display: block; margin: 0 0 12px; padding: 0 2px; } .produits-search-input { box-sizing: border-box; width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .produits-cat-pills { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin: 0 -4px 4px; padding-left: 2px; -webkit-overflow-scrolling: touch; } .produit-cat-pill { flex: 0 0 auto; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-tag); white-space: nowrap; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; } .produit-cat-pill.is-active { background: var(--accent); color: var(--inverse-on-brand); border-color: var(--accent); } .produits-status { margin: 0 0 8px; font-size: 14px; color: var(--muted-tag); } .produits-status.is-error { color: var(--danger); } .produits-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; } .produits-scroll--embedded { overflow: visible; flex: 0 0 auto; min-height: 0; padding-bottom: 0; } .produits-empty-msg { grid-column: 1 / -1; margin: 24px 14px; font-size: 15px; color: var(--muted-tag); text-align: center; } .produits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px; } .produits-list-wrap { display: flex; flex-direction: column; gap: 0; padding-top: 4px; } .produit-card--grid { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; } .produit-card__media { width: 100%; height: 140px; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--bg-secondary); } .produit-card__img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 12px 12px 0 0; } .produit-card__img-placeholder { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; font-size: 42px; background: var(--bg-secondary); color: var(--text-secondary); } .produit-card__body { padding: 8px; } .produit-card__titre { color: var(--text-primary); font-weight: 600; font-size: 13px; margin: 0 0 4px; line-height: 1.3; } .produit-card--list .produit-card__titre.produit-card__titre--list { font-size: 14px; } .produit-card__prix { color: var(--accent); font-weight: 700; font-size: 14px; margin: 0; } .produit-card__meta { color: var(--text-secondary); font-size: 11px; margin: 4px 0 0; } .produit-card--list { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0 14px 10px; } .produit-card__thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border); } .produit-card__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .produit-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-secondary); } .produit-card__list-main { flex: 1; min-width: 0; } .produit-card__desc { color: var(--text-secondary); font-size: 12px; margin: 0 0 6px; line-height: 1.35; } .produit-card__prix--list { color: var(--accent); font-weight: 700; font-size: 16px; min-width: fit-content; } .screen-annonce-detail { display: flex; flex-direction: column; overflow: hidden; } .annonce-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .annonce-photos-carousel { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -20px 16px; padding: 0 20px; } .annonce-photos-carousel img { flex: 0 0 100%; width: 100%; max-width: 100%; height: 240px; object-fit: cover; scroll-snap-align: start; border-radius: 12px; } .annonce-detail-inner { padding: 0 4px 32px; } .annonce-detail-titre { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.25; } .annonce-detail-prix { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--accent); } .annonce-badge-etat { display: inline-block; margin-bottom: 14px; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; } .annonce-badge-etat--neuf { background: rgba(46, 204, 113, 0.2); color: var(--success); } .annonce-badge-etat--tresbon { background: rgba(52, 152, 219, 0.2); color: var(--accent); } .annonce-badge-etat--bon { background: rgba(155, 155, 155, 0.25); color: var(--text-secondary); } .annonce-badge-etat--acceptable { background: rgba(255, 107, 53, 0.2); color: var(--accent); } .annonce-detail-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; } .annonce-vendeur-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .annonce-vendeur-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--text-primary); flex-shrink: 0; } .annonce-vendeur-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .annonce-vendeur-nom { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text-primary); } .annonce-vendeur-nom--link { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .annonce-carousel-photo-fallback { min-height: 200px; display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--bg-secondary); color: var(--text-secondary); } .charite-detail-pseudo-link { display: inline; padding: 0; margin: 0; border: none; background: none; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; cursor: pointer; } .charite-card__pseudo-link { display: inline; padding: 0; margin: 0; border: none; background: none; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; cursor: pointer; } .annonce-vendeur-avis { margin: 0; font-size: 13px; color: var(--text-secondary); } .annonce-contact-block { margin-bottom: 14px; } .annonce-btn-call { display: block; width: 100%; padding: 14px 20px; margin-bottom: 12px; font: inherit; font-size: 17px; font-weight: 700; text-align: center; color: var(--inverse-on-brand); background: var(--accent); border-radius: var(--radius); text-decoration: none; } .annonce-reseaux-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .annonce-reseau-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; color: var(--inverse-on-brand); background: var(--accent); border-radius: 50%; text-decoration: none; } .annonce-btn-favori { display: block; width: 100%; padding: 14px; margin-bottom: 10px; font: inherit; font-size: 16px; font-weight: 600; color: var(--accent); background: transparent; border: 2px solid var(--accent); border-radius: var(--radius); cursor: pointer; } .annonce-btn-signaler { display: block; width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-primary); background: color-mix(in srgb, var(--danger) 22%, var(--bg-card)); border: 2px solid color-mix(in srgb, var(--danger) 65%, var(--border)); border-radius: var(--radius); cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent); -webkit-tap-highlight-color: transparent; } .annonce-btn-signaler:active { opacity: 0.94; background: color-mix(in srgb, var(--danger) 30%, var(--bg-card)); } .screen-poster-annonce { gap: 0; overflow: hidden; } .screen-poster-annonce .poster-form-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .poster-etat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .poster-etat-opt { flex: 1 1 40%; padding: 10px 12px; font-size: 13px; color: var(--muted-tag); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .poster-etat-opt:has(input:checked) { border-color: var(--accent); color: var(--text-primary); background: var(--accent-light); font-weight: 600; } .poster-prix-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .poster-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted-tag); } /* Grille photos (poster annonce, prestation, cert.) — 3 colonnes × 96px */ .poster-photos-grid { display: grid; grid-template-columns: repeat(3, 96px); gap: 8px; margin-bottom: 12px; justify-content: start; } .poster-photos-grid--single { grid-template-columns: 96px; } .profil-portfolio-grid, .owner-portfolio-grid, #profil-prestation-photos-grid, #profil-portfolio-visiteur-grid { display: grid; grid-template-columns: repeat(3, 96px); gap: 8px; } .poster-photo-cell { width: 96px; height: 96px; position: relative; overflow: hidden !important; border-radius: 8px; background: var(--bg-secondary); flex-shrink: 0; } #profil-prestation-photos-grid .poster-photo-cell, #profil-portfolio-visiteur-grid .poster-photo-cell { overflow: hidden !important; position: relative !important; } .poster-photo-cell__inner { position: relative; width: 100%; height: 100%; overflow: hidden; } .poster-photo-cell--empty:not(.poster-photo-cell--locked) { border: 2px dashed var(--border); background: var(--bg-secondary); } .poster-photo-cell--locked { border: 2px dashed var(--border); background: var(--bg-secondary); opacity: 0.55; pointer-events: none; } .poster-photo-cell--filled { border: 2px solid var(--border); } .poster-photo-cell__tap { position: absolute; inset: 0; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .poster-photo-cell__tap:disabled { cursor: not-allowed; } .poster-photo-cell__plus { font-size: 28px; font-weight: 300; line-height: 1; color: var(--accent); } /* Choix explicite galerie / appareil (annonces, inscription, etc.) */ .poster-photo-cell__sources-wrap { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; align-items: stretch; justify-content: center; padding: 6px; } .poster-photo-source-btn { font: inherit; font-size: 11px; font-weight: 700; line-height: 1.15; padding: 6px 4px; margin: 0; border-radius: 6px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; } .poster-photo-source-btn:active { opacity: 0.88; } .poster-photo-cell__preview { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; background: transparent !important; } .poster-photo-cell__fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); background: var(--bg-secondary); } .poster-photo-cell--empty .poster-photo-cell__fallback, .profil-hero-visitor-actions { margin-top: 2px; margin-bottom: 8px; } /* Suppression photo : zone tactile 44×44 (WCAG mobile), visible sur toute image */ .poster-photo-cell__remove { position: absolute; top: 0; right: 0; z-index: 3; min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0; margin: 0; border: none; border-radius: 0 8px 0 10px; font-size: 22px; line-height: 1; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .poster-photo-cell__remove:active { background: rgba(0, 0, 0, 0.72); } .poster-cert-doc-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--accent); background: var(--bg-secondary); pointer-events: none; } /* Charité & anciens slots : inchangés */ .poster-photo-slot { flex: 1; position: relative; aspect-ratio: 1; max-width: 110px; min-width: 0; border: 2px dashed var(--btn-elevated); border-radius: 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; cursor: default; overflow: hidden; background: var(--bg-secondary); } .poster-photos-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .poster-photo-slot-visual { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } .poster-photo-placeholder { font-size: 28px; color: var(--muted-tag); } .poster-photo-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .poster-photo-slot-toolbar { display: flex; gap: 4px; flex-shrink: 0; padding: 4px 4px 5px; border-top: 1px solid var(--btn-elevated); background: var(--bg-secondary); } .poster-photo-source-btn { flex: 1; min-width: 0; margin: 0; padding: 5px 4px; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; } .poster-photo-source-btn:active { opacity: 0.85; } .profil-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; } .profil-avatar-source-btn { margin: 0; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--accent); border-radius: 10px; cursor: pointer; } .profil-avatar-source-btn:active { opacity: 0.9; } .mpa-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .mpa-photo-action-btn { margin: 0; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--accent); border-radius: 10px; cursor: pointer; } .mpa-photo-action-btn:active { opacity: 0.9; } .profil-prestation-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .profil-prestation-photo-btn { margin: 0; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; } .profil-prestation-photo-btn:active { opacity: 0.9; } .poster-premium-msg { font-size: 13px; color: var(--warm-text); margin: 0 0 8px; } /* Comme #inscription-form-panel : [hidden] doit gagner sur display:flex sinon le panneau reste au-dessus et capte les clics. */ #poster-form-panel[hidden], #poster-success-panel[hidden] { display: none !important; } .poster-success-panel { padding: 24px 20px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; margin: 0 auto; } .poster-success-panel .inscription-submit, .poster-success-panel .profil-btn-secondary { width: 100%; max-width: 320px; } .poster-success-title { font-size: var(--font-section); font-weight: var(--font-section-weight); color: var(--success); margin: 0 0 4px; } .profil-mes-annonces-list { list-style: none; margin: 0 0 12px; padding: 0; } .profil-mes-annonces-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--text-primary); } .profil-mes-annonces-item__prix { color: var(--accent); font-weight: 700; flex-shrink: 0; } /* Hashtags */ .hashtags-section-wrap { margin-top: 16px; } .hashtags-hint { color: var(--text-secondary); font-size: 13px; margin: 0 0 10px; } .hashtags-hint--compact { line-height: 1.45; } .hashtags-recents-row--compact { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: thin; } .hashtags-recents-row--compact .hashtag-pill { flex-shrink: 0; } .hashtags-input-wrap { position: relative; flex: 1; min-width: 0; } .hashtags-custom-composer--compact .hashtags-custom-row { align-items: stretch; } .hashtags-autocomplete-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 220px; overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .hashtags-autocomplete-item { display: block; width: 100%; margin: 0; padding: 10px 12px; text-align: left; font: inherit; font-size: 14px; color: var(--text-primary); background: transparent; border: none; border-radius: 8px; cursor: pointer; } .hashtags-autocomplete-item:hover, .hashtags-autocomplete-item:focus-visible { background: var(--bg-secondary); outline: none; } .hashtags-cat-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 6px; } .hashtags-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .hashtag-pill { padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); transition: background 0.2s, border-color 0.2s, color 0.2s; } .hashtag-pill--active { background: var(--accent); border-color: var(--accent); color: var(--inverse-on-brand); } .hashtag-pill--active.hashtag-pill--profile-default { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } .hashtag-pill--active.hashtag-pill--profile-default .hashtag-pill__remove { color: var(--accent-hover); } .hashtags-custom-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .hashtags-custom-composer { margin-top: 12px; } .hashtags-custom-row { display: flex; gap: 8px; align-items: center; } .hashtags-custom-preview { margin: 6px 0 0; padding: 0 2px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--accent); min-height: 1.35em; } .hashtags-custom-preview[hidden] { display: none !important; } .hashtags-custom-input { flex: 1; min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px; color: var(--text-primary); caret-color: var(--accent); font-size: 14px; } .hashtags-custom-input::placeholder { color: var(--text-secondary); opacity: 0.9; } .hashtags-custom-add { flex-shrink: 0; background: var(--accent); border: none; border-radius: 20px; padding: 8px 14px; color: var(--text-on-accent); font-size: 13px; font-weight: 600; cursor: pointer; } .hashtag-pill--custom { display: inline-flex; align-items: center; gap: 2px; padding: 6px 6px 6px 12px; } .hashtag-pill__text { pointer-events: none; } .hashtag-pill__remove { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; font: inherit; font-size: 18px; line-height: 1; color: inherit; background: transparent; border: none; border-radius: 50%; cursor: pointer; opacity: 0.85; } .hashtag-pill__remove:hover, .hashtag-pill__remove:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.12); } .hashtag-pill--active .hashtag-pill__remove:hover, .hashtag-pill--active .hashtag-pill__remove:focus-visible { background: rgba(0, 0, 0, 0.18); } .profil-hashtags-inner { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .profil-hashtag-pill { padding: 4px 10px; border-radius: 20px; font-size: 11px; cursor: pointer; background: rgba(255, 107, 53, 0.12); border: 1px solid rgba(255, 107, 53, 0.25); color: var(--accent); } .annonce-detail-hashtags { margin: 0 0 16px; } .annonce-detail-hashtags .profil-hashtags-inner { margin: 0; } .profil-owner-hashtag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .profil-owner-hashtag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; font-size: 12px; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--border); } .profil-owner-hashtag-remove { cursor: pointer; color: var(--muted-tag); font-size: 14px; line-height: 1; padding: 0 2px; border: none; background: none; } .profil-hashtags-edit-section { margin-bottom: 12px; } .profil-owner-hashtags-root { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .profil-owner-hashtag-unified-pills { margin-top: 0; min-height: 8px; } /* Hashtags profil : visibilité par prestation (profil artisan propriétaire) */ .profil-prestation-ph-vis { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline); } .profil-prestation-ph-vis__label { margin: 0 0 6px; font-size: 12px; } .profil-prestation-ph-vis__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .profil-prestation-ph-pill { padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .profil-prestation-ph-pill--on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .profil-prestation-ph-pill--off { background: transparent; border-color: var(--accent); color: var(--accent-muted-text); } .profil-prestation-visiteur-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } #profil-hashtags-save { margin-top: 12px; margin-bottom: 8px; } /* —— Charité —— */ .charite-hub-cards { margin-bottom: 4px; } .search-screen--charite .charite-explorer-context-bar { margin: 0 0 6px; padding: 6px 10px; font-size: 11px; } .search-screen--charite #charite-explorer-title { font-size: 18px; margin: 0 0 4px; line-height: 1.2; } .search-screen--charite .charite-explorer-list.charite-list { padding-left: 16px; padding-right: 16px; padding-bottom: 0; } .charite-explorer-context-bar { margin: -4px 0 10px; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--muted-tag); } .charite-explorer-context-bar--besoin { color: var(--accent-muted-text); border-color: rgba(255, 107, 53, 0.35); background: rgba(255, 107, 53, 0.08); } .charite-explorer-context-bar--action { color: var(--success); border-color: rgba(46, 204, 113, 0.35); background: rgba(46, 204, 113, 0.08); } .charite-explorer-context-bar--all { color: var(--border); border-color: var(--text-muted); background: rgba(255, 255, 255, 0.03); } .charite-explorer-toolbar { display: flex; flex-direction: column; gap: 12px; width: 100%; flex-shrink: 0; } .charite-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; } .charite-filter-pill { flex: 0 0 auto; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-tag); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .charite-filter-pill.is-active { color: var(--accent); border-color: rgba(255, 107, 53, 0.55); background: rgba(255, 107, 53, 0.1); } .charite-explorer-search-wrap { position: relative; display: block; width: 100%; } .charite-explorer-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-tag); pointer-events: none; } .charite-explorer-search-input { box-sizing: border-box; width: 100%; padding: 12px 14px 12px 44px; font: inherit; font-size: 15px; color: var(--text-primary); caret-color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .charite-explorer-search-input::placeholder { color: var(--muted-tag); } .charite-explorer-search-input:focus { outline: none; border-color: rgba(255, 107, 53, 0.45); } .charite-list-empty { margin: 0; padding: 8px 0 24px; font-size: 14px; color: var(--text-secondary); line-height: 1.45; } .charite-list-empty strong { color: var(--text-primary); font-weight: 600; } .charite-empty-code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent-muted-text); word-break: break-all; } .charite-list-empty--api { padding-top: 12px; } .charite-explorer-hint { margin: 0; padding: 0 2px; font-size: 12px; line-height: 1.45; color: var(--muted-tag); } .charite-explorer-hint strong { color: var(--border); font-weight: 600; } .charite-hashtags-wrap { margin-top: 8px; margin-bottom: 8px; } .inscription-label--hashtags { margin-bottom: 4px; } .label-optional { font-weight: 400; color: var(--muted-tag); font-size: 13px; } .charite-hashtags-lede { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted-tag); } .charite-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .charite-tag-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.28); } .charite-photos-hint { margin: -4px 0 10px; font-size: 12px; line-height: 1.45; color: var(--muted-tag); } .charite-photos-hint strong { color: var(--accent-muted-text); font-weight: 600; } .charite-photos-row { margin-bottom: 8px; } .charite-photo-slot.is-disabled { opacity: 0.35; pointer-events: none; } .charite-detail-photos { margin: 0 0 14px; } .charite-detail-photos-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .charite-detail-photo { flex: 0 0 auto; width: min(100%, 280px); max-height: 200px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); } .charite-card__thumb { width: 100%; max-height: 120px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); } .charite-card__thumb img { width: 100%; height: 100px; object-fit: cover; display: block; } .charite-detail-hashtags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .charite-detail-tag-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.3); } .charite-subtitle-muted { margin-left: 20px; margin-right: 20px; } .charite-list-status { margin: 0 20px 8px; font-size: 13px; color: var(--muted-tag); min-height: 1.2em; } .charite-list { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--space-screen) 24px; } .charite-card { display: block; width: 100%; text-align: left; padding: var(--space-screen); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: inherit; font: inherit; transition: border-color 0.2s ease; outline: none; } .charite-card:hover { border-color: rgba(255, 107, 53, 0.35); } .charite-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .charite-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .charite-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; } .charite-badge--besoin { background: rgba(255, 107, 53, 0.18); color: var(--accent-muted-text); border: 1px solid rgba(255, 107, 53, 0.35); } .charite-badge--offre { background: rgba(46, 204, 113, 0.12); color: var(--success); border: 1px solid rgba(46, 204, 113, 0.35); } .charite-badge--cat { background: var(--bg-card); color: var(--muted-tag); border: 1px solid var(--border); } .charite-card__titre { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; line-height: 1.35; } .charite-card__meta { font-size: 12px; color: var(--muted-tag); margin: 0; line-height: 1.45; } .charite-card__aides { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--success); } .charite-card__expiry { margin: 6px 0 0; font-size: var(--font-caption); } .charite-expiry--soon { color: var(--warm-text); } .charite-expiry--expired { color: var(--danger); } .charite-card__contact-btn { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .charite-card__contact-btn:hover { border-color: var(--accent); } .charite-detail-expiry { font-size: var(--font-caption); margin: 8px 0 0; } .charite-form { padding: 0 20px var(--scroll-pad-bottom); display: flex; flex-direction: column; gap: 0; } .screen-charite-form { gap: 0; overflow: hidden; } .screen-charite-form .charite-form.inscription-scroll { /* flex-basis 0 évite les arrondis hauteur / scroll max qui font « vibrer » la barre en bas de page */ flex: 1 1 0%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; overflow-anchor: none; } .charite-privacy-hint { margin: 8px 0 16px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--success); background: rgba(46, 204, 113, 0.08); border: 1px solid rgba(46, 204, 113, 0.2); } .charite-confirm-inner { padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 0 auto; } .charite-confirm-text { font-size: 17px; line-height: 1.5; color: var(--border); margin: 0; } .screen-charite-detail { position: relative; display: flex; flex-direction: column; overflow: hidden; gap: 0; } .screen-charite-detail .charite-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .charite-detail-scroll { padding: 0 20px 40px; } .charite-detail-owner-bar { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--bg-primary); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06); } .charite-detail-owner-bar__btn { flex: 1 1 calc(50% - 5px); min-height: 48px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: none; } .charite-detail-owner-bar__btn--primary { color: var(--text-on-accent); background: var(--accent-cta); transition: background 0.2s ease; } .charite-detail-owner-bar__btn--primary:hover { background: var(--accent-dark); } .charite-detail-owner-bar__btn--primary:active { opacity: 0.92; } .charite-detail-owner-bar__btn--danger { color: var(--danger); background: transparent; border: 2px solid var(--danger); } .charite-detail-owner-bar__btn--danger:active { opacity: 0.9; background: color-mix(in srgb, var(--danger) 10%, transparent); } .charite-detail-delete-confirm-root { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.45); } .charite-detail-delete-confirm-root .pu-inline-delete-confirm { max-width: 360px; width: 100%; } .charite-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .charite-detail-titre { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; line-height: 1.3; } .charite-detail-desc { font-size: 15px; line-height: 1.55; color: var(--muted-tag); margin: 0 0 16px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } .charite-detail-meta { font-size: 14px; color: var(--muted-tag); margin: 0 0 8px; } .charite-detail-nb { font-size: 14px; font-weight: 600; color: var(--success); margin: 0 0 20px; } .charite-detail-actions { display: flex; flex-direction: column; gap: 10px; } .charite-detail-resolu { padding: 14px 20px; border-radius: var(--radius); border: 1px solid rgba(46, 204, 113, 0.45); background: rgba(46, 204, 113, 0.12); color: var(--success); font-size: 15px; font-weight: 600; cursor: pointer; font: inherit; } .charite-detail-signaler { margin-top: 24px; align-self: flex-start; padding: 8px 0; border: none; background: none; color: var(--muted-tag); font-size: 13px; cursor: pointer; text-decoration: underline; font: inherit; } .profil-mes-charite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .profil-mes-charite-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .profil-mes-charite-item__titre { font-size: 14px; font-weight: 600; color: var(--text-primary); } .profil-mes-charite-item__status { font-size: 12px; color: var(--muted-tag); } .profil-mes-charite-item__btn { align-self: flex-start; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(46, 204, 113, 0.4); background: rgba(46, 204, 113, 0.1); color: var(--success); font-size: 13px; cursor: pointer; font: inherit; } /* Barre de recherche unifiée + filtres (écrans résultats / produits / charité / métiers) */ .search-shell { padding: 0 20px 12px; } .search-shell__row { display: flex; align-items: stretch; gap: 10px; margin-bottom: 4px; } .search-shell__input-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); /* iOS / WebKit : évite la coupure du placeholder dans une ligne flex */ overflow: visible; } .search-shell__input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; padding: 0; font: inherit; font-size: 15px; color: var(--text-primary); background: transparent; border: none; outline: none; -webkit-appearance: none; appearance: none; } .search-shell__input::placeholder { color: var(--muted-tag); } .search-shell__filters-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card) 100%); border: 1px solid var(--text-muted); border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .search-shell__filters-btn:hover { border-color: rgba(255, 107, 53, 0.45); background: linear-gradient(180deg, var(--border) 0%, var(--bg-card) 100%); } .search-shell__filters-btn:active { transform: scale(0.98); opacity: 0.92; } .search-shell__filters-icon { flex-shrink: 0; display: block; color: var(--text-secondary); opacity: 0.95; } .search-shell__filters-title { font-weight: 600; } .search-shell__filters-count { font-size: 13px; font-weight: 700; color: var(--accent); } .search-shell__filters-label { display: inline-flex; align-items: baseline; gap: 0; } .search-shell__hashtags-block { display: flex; flex-direction: column; gap: 6px; } .search-shell__hashtag-search-wrap { display: block; margin: 0 0 2px; } .search-shell__hashtag-active-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 0; margin: 0 0 4px; } .search-shell__hashtag-active-row:empty { display: none; margin: 0; } .hashtag-filter-active-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 6px 4px 10px; font-size: 12px; font-weight: 600; line-height: 1.2; color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .hashtag-filter-active-pill__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hashtag-filter-active-pill__remove { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; font: inherit; font-size: 16px; line-height: 1; color: inherit; cursor: pointer; background: rgba(0, 0, 0, 0.12); border: none; border-radius: 50%; } .hashtag-filter-active-pill__remove:hover { background: rgba(0, 0, 0, 0.2); } .hashtag-filter-active-pill__remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .search-shell__hashtag-search-input { width: 100%; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; } .search-shell__hashtag-search-input::placeholder { color: var(--muted-tag); } .search-shell__hashtag-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } /* Écrans recherche : une seule colonne verticale ; pills = pan horizontal uniquement */ .search-screen .search-shell__hashtag-search-input { height: 44px; box-sizing: border-box; line-height: 1.25; padding: 10px 12px; border-radius: 12px; } .search-screen .search-shell__hashtags, .search-screen .search-shell__hashtags--recents { touch-action: pan-x; overscroll-behavior-x: contain; padding-top: 4px; padding-bottom: 4px; } .search-screen .search-shell__hashtag-active-row:not(:empty) { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; margin-bottom: 2px; -webkit-overflow-scrolling: touch; } .search-screen .search-shell__hashtags-block { gap: 4px; } .search-shell__hashtags-recents-title { margin: 4px 0 0; padding: 0 2px; font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; } .search-shell__hashtags--recents { padding-top: 0; } .search-shell__hashtags { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 8px 0 12px; margin: 0 -4px; padding-left: 2px; border: none; border-bottom: none; box-shadow: none; isolation: isolate; -webkit-overflow-scrolling: touch; /* Évite la barre grise fantôme sous la première pill (track de scroll / subpixel) */ scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; } .search-shell__hashtags::-webkit-scrollbar { height: 4px; } .search-shell__hashtags::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } .search-shell__hashtags::-webkit-scrollbar-track { background: transparent; } .search-shell__hashtags .filter-hashtag-pill { flex: 0 0 auto; } .sheet-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .sheet-header-row .metiers-filter-sheet__title { margin: 0; } .sheet-close-btn { flex-shrink: 0; margin: -4px -8px 0 0; padding: 4px 10px; font: inherit; font-size: 22px; line-height: 1; color: var(--text-secondary); background: transparent; border: none; border-radius: 8px; cursor: pointer; } .sheet-close-btn:active { opacity: 0.8; } .sheet-toggles .sheet-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; color: var(--border); cursor: pointer; } .sheet-toggles input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--accent); } .metiers-filter-section input[type='range'] { width: 100%; accent-color: var(--accent); } .search-error-bottom { text-align: center; padding: 6px var(--space-screen) 10px; font-size: var(--font-caption); line-height: 1.35; color: var(--danger); } /* [hidden] doit gagner sur display:flex — sinon squelette + liste visibles en même temps */ .list-skeleton[hidden] { display: none !important; } .list-skeleton { padding: 4px var(--space-screen) 16px; display: flex; flex-direction: column; gap: 12px; } .list-skeleton__card { height: 92px; border-radius: var(--radius); background: linear-gradient(90deg, var(--bg-card) 25%, var(--btn-elevated) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: lazone-skeleton-shimmer 1.15s ease-in-out infinite; } .list-skeleton__card--charite { height: 110px; } .list-skeleton--artisans { padding: 0; gap: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; } .list-skeleton__artisan { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 88px; padding: 16px; box-sizing: border-box; border-bottom: 1px solid var(--border); background: var(--bg-card); } .list-skeleton__artisan:last-child { border-bottom: none; } .list-skeleton__artisan-photo { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(90deg, var(--bg-card) 0%, var(--border) 50%, var(--bg-card) 100%); background-size: 200% 100%; animation: lazone-skeleton-shimmer 1.15s ease-in-out infinite; } .list-skeleton__artisan-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .list-skeleton__artisan-right { flex: 0 0 72px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .list-skeleton__artisan-line { border-radius: 6px; background: linear-gradient(90deg, var(--bg-card) 0%, var(--border) 50%, var(--bg-card) 100%); background-size: 200% 100%; animation: lazone-skeleton-shimmer 1.15s ease-in-out infinite; } .list-skeleton__artisan-line--lg { width: 72%; max-width: 180px; height: 12px; } .list-skeleton__artisan-line--md { width: 58%; max-width: 140px; height: 10px; } .list-skeleton__artisan-line--sm { width: 42%; max-width: 100px; height: 8px; } .list-skeleton__artisan-line--rating { width: 52px; height: 12px; } .list-skeleton__artisan-line--xs { width: 36px; height: 8px; } @keyframes lazone-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .resultats-note-row { display: flex; flex-wrap: wrap; gap: 8px; } .resultats-note-btn { padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-tag); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .resultats-note-btn.is-active { color: var(--text-primary); background: rgba(255, 107, 53, 0.2); border-color: var(--accent); } .produits-price-row { display: flex; gap: 12px; align-items: flex-end; } .produits-price-field { flex: 1 1 50%; display: flex; flex-direction: column; gap: 6px; } .produits-price-field__lbl { font-size: 11px; font-weight: 600; color: var(--muted-tag); text-transform: uppercase; letter-spacing: 0.04em; } .produits-filter-etat-row { display: flex; flex-wrap: wrap; gap: 8px; } .produits-etat-chip { padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-tag); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .produits-etat-chip.is-active { color: var(--text-primary); border-color: var(--accent); background: rgba(255, 107, 53, 0.18); } .charite-sheet-type-row { display: flex; flex-direction: column; gap: 8px; } .charite-sheet-type-btn { width: 100%; text-align: left; padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted-tag); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .charite-sheet-type-btn.is-active { color: var(--text-primary); border-color: var(--accent); background: rgba(255, 107, 53, 0.18); } .metiers-toolbar--below-search { padding-top: 4px; } /* ——— Paramètres (thème) ——— */ .screen-parametres .parametres-scroll { padding: 0 20px var(--scroll-pad-bottom); flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .settings-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 16px; } .settings-section__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .settings-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 14px 0; border: none; border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; text-align: left; color: var(--text-primary); background: none; } .settings-row:last-child { border-bottom: none; } .settings-row__check { color: var(--accent); font-weight: 700; } /* ——— Perf (tactile) ——— Ne pas mettre will-change sur les conteneurs overflow-y scroll : ça provoque souvent des barres de défilement qui « convulsent » en bas de page (surtout WebKit). */ .metiers-filter-hashtag-pills { will-change: transform; } button, [role="button"], .artisan-card, .produit-card, .charite-card, .filter-hashtag-pill, .metier-chip, .metier-cat-pill, .produit-cat-pill, .resultats-sort-chip, .charite-filter-pill, .hashtag-filter-active-pill__remove, .artisans-widen-btn, .artisans-share-btn { touch-action: manipulation; } .produit-card:active, .charite-card:active, .filter-hashtag-pill:active, .metier-chip:active, .metier-cat-pill:active, .produit-cat-pill:active, .resultats-sort-chip:active, .charite-filter-pill:active { opacity: 0.92; transition: opacity 0.1s ease; } button:active, [role="button"]:active { opacity: 0.92; transition: opacity 0.1s ease; } /* Focus clavier : lisible sans casser les styles au pointeur */ .bottom-nav__btn:focus-visible, .home-card:focus-visible, .scroll-top-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } /* ——— Profil utilisateur (carte d’identité) ——— */ .screen-profil-utilisateur { gap: 0; overflow: hidden; background: var(--bg-primary); } .screen-profil-utilisateur .pu-scroll { flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; padding: 0 16px var(--scroll-pad-bottom-fab); display: flex; flex-direction: column; gap: var(--space-screen); transition: opacity 0.35s var(--ease-premium); will-change: scroll-position; } .pu-topbar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; position: sticky; top: 0; z-index: 5; background: var(--header-scrim); backdrop-filter: blur(8px); } .pu-topbar-spacer { flex: 1; } .pu-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Même gabarit que la cloche flottante : deux actions distinctes (🔔 vs ⚙️) */ .pu-icon-btn { position: relative; box-sizing: border-box; width: 44px; height: 44px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; font-size: 20px; line-height: 1; background: var(--bg-card); color: var(--text-primary); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.15s var(--ease-premium), background 0.15s ease; -webkit-tap-highlight-color: transparent; } .pu-icon-btn:active { transform: scale(0.96); } .pu-icon-btn__glyph { pointer-events: none; } .pu-icon-btn__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; color: var(--inverse-on-brand); background: var(--danger); border-radius: 999px; box-sizing: border-box; } .pu-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-screen); box-shadow: var(--shadow-card); transition: box-shadow 0.35s var(--ease-premium), transform 0.35s var(--ease-premium); } .pu-header-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; } .pu-avatar-wrap { position: relative; width: 80px; height: 80px; margin-bottom: 12px; flex-shrink: 0; } /* Une seule couche : image et initiales se superposent (évite le décalage sur le titre) */ .pu-avatar-wrap .pu-avatar--img, .pu-avatar-wrap .pu-avatar--initials { position: absolute; inset: 0; margin: 0; } .pu-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--text-on-accent); background: linear-gradient(145deg, var(--accent) 0%, var(--accent-hover) 100%); border: 3px solid transparent; transition: box-shadow 0.35s var(--ease-premium); } .pu-avatar--img { background: var(--bg-secondary); } .pu-display-name { margin: 0 0 6px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text-primary); } .pu-badge-premium { display: inline-block; margin: 0 0 10px; } .pu-meta { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); } /* Profil utilisateur > activité indépendante: évite le débordement des mots très longs. */ #pu-independant-body, #pu-independant-body .pu-meta { overflow-wrap: anywhere; word-break: break-word; } .pu-legal-sub { margin: -4px 0 6px; font-size: 13px; line-height: 1.35; color: var(--text-muted); } .screen-editer-compte { gap: 0; overflow: hidden; background: var(--bg-primary); } .screen-editer-compte .pu-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--scroll-pad-bottom); } .pu-edit-title { margin: 8px 0 6px; } .pu-edit-lede { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); } .pu-edit-reseaux-lede { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); } .pu-scroll--edit { padding-top: 4px; } .pu-edit-pro-row { margin: 0 0 16px; } .pu-edit-pro-row .pu-btn-secondary { width: 100%; margin: 0; } .pu-btn-primary { width: 100%; max-width: 320px; padding: 14px 20px; border: none; border-radius: var(--radius); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--text-on-accent); background: var(--accent-cta); transition: background 0.25s ease, transform 0.2s var(--ease-premium); } .pu-btn-primary:hover { background: var(--accent-dark); } .pu-btn-primary:active { transform: scale(0.98); background: var(--accent-dark); } .pu-card--stats { padding: var(--space-screen); } .pu-stats-row { display: flex; gap: 8px; justify-content: space-between; } .pu-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--hairline); } .pu-stat[hidden] { display: none !important; } .pu-stat__icon { font-size: 18px; } .pu-stat__val { font-size: 20px; font-weight: 800; color: var(--text-primary); } .pu-stat__lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .pu-stat__note { font-size: 10px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--text-secondary); max-width: 100%; } .ville-autocomplete-wrap { position: relative; } /* Wrapper input + flèche */ .search-input-wrap { position: relative; display: flex; align-items: center; width: 100%; } .search-input-wrap input { flex: 1; padding-right: 40px; } .search-toggle-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 12px; color: var(--muted-tag); padding: 4px 6px; line-height: 1; -webkit-tap-highlight-color: transparent; z-index: 2; } .search-toggle-arrow:active { color: var(--accent-cta); } /* Pour le wrap ville (input déjà dans le wrap) */ .ville-autocomplete-wrap input { padding-right: 40px; } .ville-suggestions-inline { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 4px; overflow: hidden; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ville-suggestions-inline .ville-suggestion-item { padding: 14px 16px; font-size: 15px; color: var(--text-primary) !important; cursor: pointer; border-bottom: 1px solid var(--border); -webkit-tap-highlight-color: transparent; display: block; background: transparent !important; } .ville-suggestions-inline .ville-suggestion-item:last-child { border-bottom: none; } .ville-suggestions-inline .ville-suggestion-item:active { background: var(--bg-secondary) !important; } .ville-suggestions { position: absolute; left: 0; right: 0; z-index: 99999; background: #ffffff; color: #1a1a1a; max-height: 250px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .ville-suggestion-item { padding: 12px 16px; font-size: 15px; cursor: pointer; color: #1a1a1a !important; background: #ffffff !important; } .ville-suggestion-item:hover, .ville-suggestion-item:active { background: #f5f5f5 !important; color: #1a1a1a !important; } .profil-mercis-public { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); font-size: 15px; font-weight: 600; color: var(--text-primary); } .profil-mercis-public__val { font-weight: 800; font-variant-numeric: tabular-nums; } .profil-mercis-public__lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-tag); } /* Bloc Mercis visiteur : même renfort (classe .profil-mercis-public définit display:flex plus haut dans la feuille) */ #profil-mercis-public-wrap[hidden], .profil-mercis-public[hidden] { display: none !important; } .settings-row--toggle { cursor: default; } .settings-row--toggle input[type='checkbox'] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } .settings-row__hint { margin: -6px 0 0; padding: 0 0 8px; font-size: 13px; line-height: 1.35; color: var(--text-secondary); } .pu-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pu-section-title { margin: 0; font-size: var(--font-section); font-weight: var(--font-section-weight); color: var(--text-primary); } .pu-icon-add { width: 40px; height: 40px; border-radius: 12px; border: 2px dashed var(--accent); background: var(--accent-light); color: var(--accent); font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform 0.2s ease; } .pu-icon-add:active { transform: scale(0.95); } .pu-empty { margin: 0; font-size: 14px; color: var(--text-secondary); } .pu-mixed-activity { display: flex; flex-direction: column; gap: 16px; } .pu-mixed-group__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-secondary); } .pu-prestation-mixed-tap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-secondary); font: inherit; text-align: left; cursor: pointer; } .pu-prestation-mixed__title { font-weight: 600; color: var(--text-primary); } .pu-prestation-mixed__meta { font-size: 13px; color: var(--text-secondary); } .pu-annonces-list, .pu-charite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pu-annonce-row { list-style: none; } .pu-annonce-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-secondary); } .pu-annonce-card--vendu { opacity: 0.88; background: var(--bg-card); } .pu-annonce-card__top { display: flex; align-items: stretch; gap: 0; } .pu-annonce-card__top .pu-annonce-main { flex: 1; min-width: 0; } .pu-annonce-actions { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 10px 8px 0; flex-shrink: 0; } .pu-annonce-icon-btn { width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px; font-size: 18px; line-height: 1; cursor: pointer; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); transition: opacity 0.15s ease; } .pu-annonce-icon-btn:active { opacity: 0.88; } .pu-annonce-icon-btn--danger:active { background: rgba(220, 53, 69, 0.12); } .pu-annonce-toolbar { padding: 8px 12px 10px; border-top: 1px solid var(--border); background: var(--bg-secondary); } .pu-annonce-sold-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; user-select: none; } .pu-annonce-sold-label input { width: 18px; height: 18px; accent-color: var(--accent); } .pu-annonce-edit { padding: 12px; border-top: 1px solid var(--border); background: var(--bg-card); } .pu-annonce-edit[hidden] { display: none !important; } .pu-annonce-edit__actions { display: flex; gap: 10px; margin-top: 12px; } .pu-annonce-edit__actions .pu-btn-primary, .pu-annonce-edit__actions .pu-btn-secondary { flex: 1; } .pu-swipe-host { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border); touch-action: pan-y; } .pu-swipe-track { display: flex; width: 100%; transform: translateX(0); transition: transform 0.22s var(--ease-premium); will-change: transform; } .pu-annonce-main { flex: 0 0 100%; width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; text-align: left; border: none; background: none; font: inherit; color: inherit; } .pu-annonce-row .pu-annonce-main { width: 100%; } .pu-annonce-main__img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--bg-card); flex-shrink: 0; } .pu-annonce-main__body { flex: 1; min-width: 0; } .pu-annonce-main__title { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pu-annonce-main__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--text-secondary); } .pu-annonce__st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; } .pu-annonce__st--active { background: rgba(93, 202, 165, 0.18); color: var(--success); } .pu-annonce__st--vendu { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } .pu-swipe-del { flex: 0 0 88px; width: 88px; border: none; font: inherit; font-weight: 700; font-size: 13px; color: #fff; background: var(--danger); cursor: pointer; } .pu-charite-sublists { display: flex; flex-direction: column; gap: 20px; } .pu-charite-sub__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-secondary); } .pu-empty--sub { margin: 0 0 8px; font-size: 13px; } /* Annonces vente : même carte que « Mes services gratuits » — zone tap sur toute la largeur */ .pu-annonce-sale-card .pu-charite-card__tap { width: 100%; max-width: 100%; } .pu-vente-front { display: flex; flex-direction: row; align-items: stretch; gap: 0; min-width: 0; } .pu-vente-front .pu-vente-tap { flex: 1; min-width: 0; } .pu-vente-more { flex: 0 0 44px; width: 44px; border: none; border-left: 1px solid var(--border); background: var(--bg-secondary); font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-secondary); } .pu-vente-more:active { opacity: 0.88; } .pu-inline-delete-confirm { padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); } .pu-inline-delete-confirm p { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text-primary); } .pu-inline-delete-confirm__actions { display: flex; gap: 10px; } .pu-inline-delete-confirm__actions .pu-btn-secondary, .pu-inline-delete-confirm__actions .pu-btn-primary { flex: 1; padding: 10px 12px; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; } .pu-inline-delete-confirm__actions .pu-btn-secondary { border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); } .pu-inline-delete-confirm__actions .pu-btn-primary { border: none; background: var(--danger); color: #fff; } .pu-charite-row { list-style: none; } /* Profil : « Mes annonces de vente » + « Mes services gratuits » — même carte : texte puis rangée de boutons pleine largeur */ .pu-charite-card.pu-charite-card--owner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; box-sizing: border-box; padding: 0; overflow: visible; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--border); } .pu-charite-card__owner-top { display: flex; flex: 1 1 auto; min-height: 0; align-items: flex-start; } .pu-charite-card__tap { flex: 0 1 auto; max-width: 70%; min-width: 0; display: block; margin: 0; padding: 10px 12px 4px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: opacity 0.15s ease; } .pu-charite-card__tap:active { opacity: 0.88; } .pu-charite-card__copy { max-width: 100%; } .pu-charite-card__copy .pu-charite-item__titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; word-break: break-word; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--text-primary); } .pu-charite-card__copy .pu-charite-item__meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; word-break: break-word; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--muted-tag); font-weight: 400; } .pu-charite-card__owner-footer { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 12px 12px; } .pu-charite-card__btn { flex: 1 1 0; min-width: 0; min-height: 36px; height: auto; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1.2; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s ease, background 0.15s ease; } .pu-charite-card__btn--edit { border: 1px solid var(--brand); background: transparent; color: var(--brand); } .pu-charite-card__btn--edit:active { opacity: 0.88; } .pu-charite-card__btn--del { border: none; background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } .pu-charite-card__btn--del:active { opacity: 0.9; } .pu-charite-card { display: flex; align-items: flex-start; gap: 8px; padding: 0; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--border); overflow: hidden; } .pu-charite-card--resolu { opacity: 0.88; background: var(--bg-card); } .pu-charite-card--expiree { border-color: var(--border); } .pu-charite-tap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; background: none; transition: opacity 0.2s ease; } .pu-charite-tap:active { opacity: 0.92; } .pu-charite-item__titre { width: 100%; font-weight: 600; font-size: 15px; color: var(--text-primary); } .pu-charite-item__meta { width: 100%; font-size: 12px; color: var(--muted-tag); font-weight: 400; } .pu-charite-item__badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(93, 202, 165, 0.2); color: var(--success); } .pu-charite-actions { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 10px 8px 0; flex-shrink: 0; } .pu-charite-btn-resolve { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font: inherit; font-size: 12px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); cursor: pointer; white-space: nowrap; } .pu-charite-btn-resolve:active { opacity: 0.9; } .pu-charite-btn-del { width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--border); font-size: 18px; line-height: 1; cursor: pointer; background: var(--bg-card); color: var(--text-primary); } .pu-charite-btn-del:active { background: rgba(220, 53, 69, 0.1); } .pu-abo-block { margin-top: 8px; } .pu-abo-lede { margin: 0 0 10px; font-size: 14px; color: var(--text-secondary); } .pu-abo-perks { margin: 0 0 16px; padding-left: 20px; font-size: 14px; color: var(--text-primary); line-height: 1.55; } .pu-btn-premium-cta { width: 100%; padding: 14px; border: none; border-radius: var(--radius); font: inherit; font-size: 16px; font-weight: 700; color: var(--text-on-accent); background: var(--accent-cta); cursor: pointer; transition: background 0.2s ease; } .pu-btn-premium-cta:hover { background: var(--accent-dark); } .pu-btn-premium-cta:active { background: var(--accent-dark); } .pu-abo-renew { margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); } .pu-btn-cancel-subs { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 13px; color: var(--text-secondary); background: transparent; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .pu-btn-cancel-subs:hover { border-color: var(--text-muted); color: var(--text-primary); } .pu-dl { margin: 0 0 14px; } .pu-dl__row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; } .pu-dl__row:last-child { border-bottom: none; } .pu-dl__row dt { margin: 0; color: var(--text-secondary); font-weight: 500; } .pu-dl__row dd { margin: 0; color: var(--text-primary); font-weight: 600; word-break: break-word; } .pu-hashtags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-height: 0; } .pu-hashtag-pill { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary); } .pu-hashtags--accent .pu-hashtag-pill { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .pu-abo-tier { margin-top: 4px; } .pu-abo-tier__title { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--text-primary); } .pu-abo-tier__list { margin: 0 0 18px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); } .pu-abo-tier--premium { padding: 14px; border-radius: var(--radius); border: 1px solid var(--success); background: var(--bg-secondary); } .pu-abo-tier__status { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--success); } .pu-abo-renew-line { margin: 0 0 14px; font-size: 14px; color: var(--text-secondary); } .pu-btn-abo-cancel { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 13px; color: var(--text-muted); background: var(--bg-raised); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .pu-btn-abo-cancel:hover { border-color: var(--text-muted); color: var(--text-secondary); } .pu-identite-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hairline); transition: opacity 0.3s var(--ease-premium); } .pu-identite-form-summary { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; line-height: 1.35; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--hairline); } .pu-identite-form-hint { margin: -4px 0 8px; font-size: 13px; line-height: 1.4; color: var(--text-muted); } .pu-form-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .pu-form-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; } .pu-form-photo-btn { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); cursor: pointer; } .pu-form-photo-preview { border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .pu-identite-form-actions { display: flex; gap: 10px; margin-top: 8px; } .pu-identite-form-actions .pu-btn-secondary, .pu-identite-form-actions .pu-btn-primary { flex: 1; margin: 0; } .pu-independant-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .pu-btn-outline-accent { width: 100%; padding: 12px 16px; border: 2px solid var(--accent); border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: transparent; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .pu-btn-outline-accent:active { background: var(--accent-light); } .pu-btn-secondary { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .pu-btn-secondary:active { background: var(--btn-elevated); } .settings-row--disabled { opacity: 0.65; cursor: not-allowed; } .settings-row__soon { font-size: 12px; font-weight: 600; color: var(--text-muted); } .settings-row--danger { color: var(--danger); } .settings-row--static { cursor: default; pointer-events: none; } .settings-row__pill { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border); } /* ——— Paramètres utilisateur (compte) ——— */ .screen-parametres-utilisateur { gap: 0; } .screen-parametres-utilisateur .parametres-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 var(--scroll-pad-bottom); } .param-user-header { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 0 0 8px; padding: 0; } .param-user-header__back { flex-shrink: 0; } .param-user-header__title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .param-user-theme-fieldset { margin: 0; padding: 0; border: none; min-width: 0; } .param-user-theme-legend { margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); } .param-user-theme-radios { display: flex; gap: 8px; align-items: stretch; } .param-user-theme-option { flex: 1; min-width: 0; position: relative; cursor: pointer; margin: 0; } .param-user-theme-option__face { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 8px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); text-align: center; transition: border-color 0.2s ease, background 0.2s ease; } .param-user-theme-option input:focus-visible + .param-user-theme-option__face { outline: 2px solid var(--accent); outline-offset: 2px; } .param-user-theme-option input:checked + .param-user-theme-option__face { border-color: var(--accent); background: var(--accent-light); color: var(--text-primary); } .param-user-version { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text-primary); } .param-user-placeholder { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 500; color: var(--text-muted); } .param-user-placeholder:last-child { border-bottom: none; padding-bottom: 0; } /* ——— Onboarding compte ——— */ .screen-onboarding { background: var(--bg-primary); gap: 0; } .onboarding-dots { display: flex; justify-content: center; align-items: center; gap: 10px; flex-shrink: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 12px; font-size: 10px; letter-spacing: 0.12em; color: var(--accent); } .onboarding-dot { line-height: 1; user-select: none; } .onboarding-dot--filled { color: var(--accent); } .onboarding-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); } .onboarding-panel__title { text-align: center; margin-bottom: 16px; } .onboarding-photo-row { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; } .onboarding-photo-trigger { border: none; padding: 0; background: none; cursor: pointer; border-radius: 50%; } .onboarding-photo-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border); background: var(--bg-secondary); overflow: hidden; transition: border-color 0.2s ease, background 0.2s ease; } .onboarding-photo-trigger:active .onboarding-photo-circle { border-color: var(--accent); } .onboarding-photo-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .onboarding-photo-placeholder { font-size: 36px; font-weight: 300; color: var(--text-muted); line-height: 1; } .onboarding-photo-hint { margin: 0; font-size: 13px; color: var(--text-secondary); text-align: center; max-width: 22rem; } .onboarding-photo-actions { justify-content: center; width: 100%; max-width: 22rem; } .onboarding-hashtags-wrap { margin-bottom: 12px; } .onboarding-back { display: block; width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: var(--radius); font: inherit; font-size: 15px; font-weight: 600; color: var(--text-secondary); background: transparent; cursor: pointer; } .onboarding-back:active { opacity: 0.88; } /* ——— Modifier profil artisan — Mon activité ——— */ .screen-modifier-profil { /* Ne pas utiliser 100dvh ici : #main-content a déjà padding-bottom pour la barre d’onglets ; 100dvh dépasse cette zone et le bas (sticky Enregistrer) se retrouve sous la nav. */ overflow: hidden; background: var(--bg-primary); gap: 0; display: flex; flex-direction: column; } /* « Compléter ta fiche publique » : masquer tout sauf documents + liens (filet de sécurité si [hidden] est contourné). */ .mpa-screen--completion section.mpa-card[aria-labelledby='mpa-identity-title'], .mpa-screen--completion section.mpa-card[aria-labelledby='mpa-metiers-title'], .mpa-screen--completion section.mpa-card[aria-labelledby='mpa-description-block-title'], .mpa-screen--completion section.mpa-card[aria-labelledby='mpa-hashtags-title'], .mpa-screen--completion section.mpa-card[aria-labelledby='mpa-photos-title'] { display: none !important; } /* Mon profil → Modifier mon activité : identité (photo fiche, nom, ville) gérée depuis Modifier mon profil */ .mpa-screen--activity section.mpa-card[aria-labelledby='mpa-identity-title'] { display: none !important; } .mpa-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 12px 16px calc(8px + env(safe-area-inset-top, 0px)); flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-primary); } .mpa-header__title { margin: 0; font-size: 1.125rem; font-weight: 700; text-align: center; color: var(--text-primary); } .mpa-btn-save { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: none; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-on-accent); background: var(--accent); cursor: pointer; white-space: nowrap; } .mpa-btn-save:disabled { opacity: 0.55; cursor: not-allowed; } .mpa-btn-save--top { padding: 0 12px; min-height: 36px; font-size: 13px; } .mpa-nav-back { align-self: center; flex-shrink: 0; } .mpa-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 16px; } .mpa-card { padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); display: flex; flex-direction: column; gap: 12px; } .mpa-card__title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--text-primary); } .mpa-card__hint { margin: -4px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.35; } .mpa-completion-lede, .mpa-activity-lede { margin: 0 0 12px; padding: 12px 14px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); } .mpa-docs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .mpa-docs-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); font-size: 14px; color: var(--text-primary); } .mpa-docs-list__icon { flex-shrink: 0; font-size: 18px; line-height: 1; } .mpa-docs-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mpa-docs-list__remove { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; border-radius: 8px; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; color: var(--text-secondary); background: transparent; } .mpa-docs-list__remove:active { opacity: 0.85; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .mpa-docs-add-btn { align-self: flex-start; margin-top: 4px; padding: 10px 16px; border-radius: 10px; border: 2px solid var(--accent); font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .mpa-docs-add-btn:active { opacity: 0.92; background: color-mix(in srgb, var(--accent) 10%, transparent); } .mpa-docs-add-btn[hidden] { display: none; } .mpa-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: -4px; } .mpa-label--hashtags { margin-bottom: 4px; } .mpa-char-count { margin: -4px 0 0; font-size: 12px; color: var(--text-muted); text-align: right; } .mpa-global-err { margin: 0; } .mpa-scroll-spacer { /* Réserve scroll au-dessus du bandeau Enregistrer (sans doubler la tab bar du #main-content) */ height: calc(64px + var(--safe-bottom)); flex-shrink: 0; } .mpa-sticky-save { flex-shrink: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--bg-primary); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06); } .mpa-sticky-save .mpa-btn-save { width: 100%; min-height: 48px; font-size: 16px; border-radius: 12px; } .mpa-details { padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); } .mpa-details__summary { cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--text-primary); list-style: none; } .mpa-details__summary::-webkit-details-marker { display: none; } .mpa-details__optional { font-weight: 500; font-size: 13px; color: var(--text-muted); } .mpa-details__body { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 4px; } .mpa-photo-row { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 0; } .mpa-avatar-tap { border: none; padding: 0; background: none; cursor: pointer; border-radius: 50%; } .mpa-avatar-tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .mpa-photo-trigger-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .mpa-photo-trigger { border: none; padding: 0; background: none; cursor: pointer; border-radius: 50%; } .mpa-photo-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border); background: var(--bg-secondary); overflow: hidden; } .mpa-photo-preview { width: 100%; height: 100%; object-fit: cover; } .mpa-photo-placeholder { font-size: 36px; font-weight: 300; color: var(--text-muted); line-height: 1; } .mpa-photo-hint { margin: 0; font-size: 13px; color: var(--text-secondary); text-align: center; max-width: 280px; } .mpa-input-readonly { opacity: 0.72; cursor: not-allowed; background: var(--bg-secondary); } .mpa-hint { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); } .mpa-hashtags-wrap { margin-bottom: 0; } .mpa-success { margin: 12px 0 0; text-align: center; font-size: var(--font-body); font-weight: 700; color: var(--success); } /* ——— Favoris (cœurs + écran #screen-favoris) ——— */ .screen-favoris { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); } .favoris-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 var(--scroll-pad-bottom-fab); box-sizing: border-box; } .favoris-subtitle { margin-bottom: 12px; } .favoris-tabs { display: flex; gap: 8px; margin: 0 var(--space-screen) 14px; padding: 4px; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--border); } .favoris-tab { flex: 1; padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; border-radius: calc(var(--radius) - 4px); cursor: pointer; transition: background 0.18s var(--ease-premium), color 0.18s var(--ease-premium); } .favoris-tab--active { color: var(--text-primary); background: var(--bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .favoris-panel { min-height: 120px; } .favoris-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 24px; text-align: center; } .favoris-empty__text { margin: 0; font-size: var(--font-body); color: var(--text-secondary); } .favoris-explorer-btn { max-width: 220px; } .favoris-artisans-list .favoris-swipe-li { margin: 0; padding: 0; list-style: none; } .favoris-artisans-list .favoris-swipe-li .artisan-card { border-bottom: none; } .favoris-swipe-li { border-bottom: 1px solid var(--hairline); } .favoris-swipe-li:last-child { border-bottom: none; } .fav-swipe-front { flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box; } .favoris-produits-grid { padding-bottom: 16px; } .fav-produit-cell { min-width: 0; } .fav-produit-cell .fav-swipe-host { border-radius: 12px; } .fav-heart { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; border: none; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--bg-card) 88%, transparent); color: var(--text-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); transition: transform 0.15s var(--ease-premium), color 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } .fav-heart--on { color: var(--danger); } .artisan-card__inner:has(.fav-heart) .artisan-card__dispo { right: 48px; } .produit-card--grid, .produit-card--list { position: relative; } .produit-card--list .fav-heart { top: 10px; right: 10px; } @keyframes fav-heart-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .fav-heart--pulse { animation: fav-heart-pulse 0.32s var(--ease-premium); } /* ——— Cloche notifications (fixe, tous les écrans principaux) ——— */ .app-notifications-bell-wrap { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 998; pointer-events: none; } .app-notifications-bell-wrap:not([hidden]) { pointer-events: auto; } .app-notifications-bell { position: relative; width: 44px; height: 44px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); cursor: pointer; font-size: 20px; line-height: 1; transition: transform 0.15s var(--ease-premium), background 0.15s ease; -webkit-tap-highlight-color: transparent; } .app-notifications-bell:active { transform: scale(0.97); } .app-notifications-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; color: var(--inverse-on-brand); background: var(--danger); border-radius: 999px; box-sizing: border-box; } .screen-notifications { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); will-change: scroll-position; } .notifications-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 var(--scroll-pad-bottom-fab); box-sizing: border-box; } .notifications-top { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0 var(--space-screen) 8px; } .notifications-title { margin: 0; } .notifications-mark-all { display: block; width: calc(100% - 2 * var(--space-screen)); margin: 0 var(--space-screen) 14px; padding: 12px var(--space-screen); font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: opacity 0.15s ease; } .notifications-mark-all:active { opacity: 0.85; } .notifications-empty { margin: 32px var(--space-screen); text-align: center; font-size: var(--font-body); color: var(--text-secondary); } .notifications-fetch-hint { margin: 32px var(--space-screen); text-align: center; font-size: var(--font-body); line-height: 1.45; color: var(--danger); } .notifications-list { list-style: none; margin: 0; padding: 0 var(--space-screen); display: flex; flex-direction: column; gap: 10px; } .notifications-card { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-screen); border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .notifications-card--unread { border-color: var(--accent); background: color-mix(in srgb, var(--accent-light) 35%, var(--bg-card)); } .notifications-card__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 10px; background: var(--bg-secondary); } .notifications-card__body { flex: 1; min-width: 0; } .notifications-card__titre { margin: 0 0 4px; font-size: var(--font-body); font-weight: 600; color: var(--text-primary); } .notifications-card__msg { margin: 0 0 6px; font-size: var(--font-body); line-height: 1.4; color: var(--text-secondary); } .notifications-card__time { margin: 0; font-size: var(--font-caption); color: var(--text-muted); } /* Lightbox photos réalisations / prestations */ .realisation-photo-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-screen); background: rgba(0, 0, 0, 0.9); cursor: pointer; -webkit-tap-highlight-color: transparent; } .realisation-photo-lightbox__close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 1; width: 44px; height: 44px; margin: 0; padding: 0; border: none; border-radius: 12px; font: inherit; font-size: 28px; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.12); cursor: pointer; -webkit-tap-highlight-color: transparent; } .realisation-photo-lightbox__close:active { opacity: 0.85; } .realisation-photo-lightbox__img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); cursor: default; pointer-events: auto; box-shadow: var(--shadow-card); } /* Audit design : zone tactile mobile (boutons) */ @media (max-width: 480px) { button, input[type='submit'], input[type='button'], input[type='reset'] { min-height: 44px; } } /* Paiement Stripe */ .screen-paiement .paiement-topbar { align-items: center; } .screen-paiement .paiement-screen__title { margin: 0; flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--text-primary); } .paiement-screen__scroll { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); } .paiement-summary { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 20px; } .paiement-summary__icon { font-size: 36px; line-height: 1; } .paiement-summary__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); } .paiement-summary__price { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-primary); } .paiement-card-element { padding: 12px 14px; margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); min-height: 48px; } .paiement-errors { margin: 0 0 12px; font-size: 14px; color: #f87171; } .paiement-banner { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); font-size: 14px; color: var(--text-secondary); } .paiement-banner p { margin: 0; } .paiement-cancel-wrap { margin-top: 16px; text-align: center; } /* ===== ALERTES ===== */ .screen-mes-alertes, .screen-creer-alerte { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); min-height: 100%; } .screen-mes-alertes .screen-body, .screen-creer-alerte .screen-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .screen-body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .screen-header { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-screen) 8px; flex-shrink: 0; } .screen-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); flex: 1; min-width: 0; } .screen-body--pad { padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px)); } .btn-back { border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 0; flex-shrink: 0; } .btn-primary { display: block; width: 100%; padding: 14px 18px; font: inherit; font-size: 16px; font-weight: 700; color: var(--inverse-on-brand); background: var(--accent-cta); border: none; border-radius: var(--radius); cursor: pointer; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-secondary { display: block; width: calc(100% - 2 * var(--space-screen)); margin-left: var(--space-screen); margin-right: var(--space-screen); padding: 12px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .btn-full { width: 100%; margin-left: 0; margin-right: 0; } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .form-hint { font-weight: 400; color: var(--muted-tag); font-size: 13px; } .form-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .form-error { font-size: 14px; color: var(--danger); margin: 0 0 12px; } .empty-state { text-align: center; color: var(--muted-tag); font-size: 15px; margin: 24px 0; } .alertes-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .alerte-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .alerte-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .alerte-card__nom { font-weight: 700; font-size: 15px; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alerte-card__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .alerte-card__toggle { width: 42px; height: 24px; border-radius: 12px; border: none; cursor: pointer; background: var(--border); position: relative; transition: background 0.2s; } .alerte-card__toggle.is-on { background: var(--accent-cta); } .alerte-card__toggle::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.2s; } .alerte-card__toggle.is-on::after { transform: translateX(18px); } .alerte-card__delete { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; color: var(--muted-tag); } .alerte-card__meta { font-size: 13px; color: var(--muted-tag); line-height: 1.4; } .alerte-type-row { display: flex; gap: 8px; flex-wrap: wrap; } .alerte-type-btn { flex: 1; min-width: 0; padding: 10px 6px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; } .alerte-type-btn.is-active { border-color: var(--accent-cta); background: color-mix(in srgb, var(--accent-cta) 12%, transparent); color: var(--accent-cta); } .pills-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 0; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: color-mix(in srgb, var(--accent-cta) 14%, transparent); color: var(--accent-cta); font-size: 13px; font-weight: 600; cursor: default; } .pill__remove { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--accent-cta); padding: 0; } .prix-row { display: flex; align-items: center; gap: 8px; } .prix-sep { color: var(--muted-tag); font-weight: 700; } .form-range { width: 100%; accent-color: var(--accent-cta); } .screen-hint { font-size: 14px; color: var(--muted-tag); margin: 0 0 16px; } .notif-btn-alertes { margin-bottom: 16px; } .alerte-categories-container { position: relative; } .alerte-cats-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .alerte-cat-pill { padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, background 0.15s; } .alerte-cat-pill.is-selected { border-color: var(--accent-cta); background: color-mix(in srgb, var(--accent-cta) 14%, transparent); color: var(--accent-cta); } /* Formulaires : scroll + marge bas (tab bar / safe area) #screen-modifier-profil exclu : scroll unique sur .mpa-scroll (évite double barre / vide en bas). */ #screen-editer-compte, #screen-charite-besoin, #screen-charite-offre, #screen-poster-annonce { overflow-y: auto; -webkit-overflow-scrolling: touch; } #screen-editer-compte .screen-body, #screen-editer-compte form, #screen-editer-compte .pu-scroll, #screen-modifier-profil .screen-body, #screen-modifier-profil form, #screen-modifier-profil .mpa-scroll, #screen-poster-annonce .screen-body, #screen-poster-annonce form { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } #screen-charite-besoin .screen-body, #screen-charite-besoin form, #screen-charite-offre .screen-body, #screen-charite-offre form { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } /* ===== PAGE PREMIUM ===== */ .premium-page { display: flex; flex-direction: column; gap: 0; } .premium-hero { background: linear-gradient(135deg, #1a0a00 0%, #2d1200 50%, #1a0a00 100%); padding: 28px 20px 32px; text-align: center; border-radius: 0 0 24px 24px; margin-bottom: 8px; } .premium-hero__badge { display: inline-block; background: var(--accent-cta); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; } .premium-hero__title { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 8px; } .premium-hero__subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0 0 20px; line-height: 1.5; } .premium-hero__price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 6px; } .premium-price__amount { font-size: 42px; font-weight: 900; color: var(--accent-cta); line-height: 1; } .premium-price__period { font-size: 18px; color: rgba(255, 255, 255, 0.6); font-weight: 600; } .premium-price__hint { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin: 0; } .premium-benefits { list-style: none; margin: 0; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 0; } .premium-benefit { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .premium-benefit:last-child { border-bottom: none; } .premium-benefit__icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .premium-benefit strong { display: block; font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .premium-benefit p { font-size: 13px; color: var(--muted-tag); margin: 0; line-height: 1.4; } .premium-divider { height: 1px; background: var(--border); margin: 8px 16px 16px; } .premium-payment { padding: 0 16px 32px; display: flex; flex-direction: column; gap: 12px; } .premium-payment__label { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; } .premium-card-input { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--card); min-height: 46px; } .premium-card-errors { font-size: 13px; color: #e53e3e; margin: 0; } .premium-pay-btn { width: 100%; padding: 16px; background: var(--accent-cta); color: #fff; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } .premium-pay-btn:active { opacity: 0.85; } .premium-pay-hint { text-align: center; font-size: 12px; color: var(--muted-tag); margin: 0; } #screen-paiement { overflow-y: auto; -webkit-overflow-scrolling: touch; } #screen-paiement .screen-body, #screen-paiement .premium-page { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } .annonce-photos-carousel { position: relative; width: 100%; overflow: hidden; background: var(--bg-secondary); border-radius: var(--radius); margin-bottom: 12px; aspect-ratio: 4/3; } .carousel-track { display: flex; width: 100%; height: 100%; transition: transform 0.3s ease; } .carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } .carousel-counter { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(4px); pointer-events: none; } .carousel-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background 0.2s; } .carousel-dot.is-active { background: #fff; } /* ===== NOTIFICATIONS ===== */ .notif-screen { display: flex; flex-direction: column; height: 100%; } .notif-header { display: flex; align-items: center; padding: 12px 16px 8px; gap: 8px; flex-shrink: 0; border-bottom: 1px solid var(--border); } .notif-header__title { flex: 1; font-size: 18px; font-weight: 800; margin: 0; color: var(--text-primary); } .notif-header__read-all { background: none; border: none; color: var(--accent-cta); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; -webkit-tap-highlight-color: transparent; } .notif-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 calc(80px + env(safe-area-inset-bottom, 0px)); } .notif-alertes-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: 12px 16px; padding: 12px; background: color-mix(in srgb, var(--accent-cta) 10%, transparent); border: 1.5px solid color-mix(in srgb, var(--accent-cta) 30%, transparent); border-radius: var(--radius); color: var(--accent-cta); font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } .notif-section { margin-bottom: 8px; } .notif-section__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-tag); padding: 8px 16px 4px; margin: 0; } .notif-section__label--read { margin-top: 8px; } .notif-item-wrapper { position: relative; overflow: hidden; max-height: 200px; } .notif-delete-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 72px; background: #e53e3e; border: none; color: #fff; font-size: 20px; cursor: pointer; display: none; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .notif-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--card); border-bottom: 1px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform; } .notif-card--unread { background: color-mix(in srgb, var(--accent-cta) 6%, var(--card)); } .notif-unread-dot { position: absolute; top: 16px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cta); } .notif-card__icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .notif-card__body { flex: 1; min-width: 0; } .notif-card__title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; } .notif-card--unread .notif-card__title { color: var(--text-primary); } .notif-card__msg { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-card__time { font-size: 11px; color: var(--muted-tag); margin: 0; } .notif-empty { text-align: center; padding: 48px 24px; color: var(--muted-tag); font-size: 15px; } .notif-hint { text-align: center; padding: 16px; color: var(--muted-tag); font-size: 13px; } .notif-load-more { display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }