/* Finition Atelier — s'appuie uniquement sur les tokens de la palette fournie. */
:root { --surface-raised: color-mix(in oklch, var(--card) 94%, var(--primary) 6%); }

body { letter-spacing: -.012em; }
.view { max-width: 1360px; }
.eyebrow { color: var(--primary); font-weight: 700; letter-spacing: .075em; }
h1 { letter-spacing: -.06em; }

/* Navigation plus calme, avec un seul vrai repère bleu. */
.sidebar { border-right-color: var(--border); }.brand-mark { border-radius: 8px 10px 8px 4px; }.nav-link { position: relative; transition: color .16s ease, background .16s ease; }.nav-link.active { box-shadow: inset 3px 0 0 var(--primary); }.nav-link.active > span { transform: scale(1.06); }.create-button { border-radius: calc(var(--radius) + 2px); }.profile-pill { box-shadow: none; }

/* Les vues restent aérées ; les cartes ne se superposent pas visuellement. */
.feed-switch { margin-top: 28px; }.feed-tab { transition: color .16s ease, border-color .16s ease; }.feed-tab:hover { color: var(--primary); }.feed-layout { gap: 25px; }.feed-scroller { outline: 1px solid color-mix(in oklch, var(--border) 84%, transparent); outline-offset: -1px; }.mini-card, .artist-result, .order-card, .creator-dash > section { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.mini-card:hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-md-ui); }

/* Les aperçus sont des cadres de portfolio, pas des imitations d'illustrations. */
.art-aurora > span, .art-poppy > span, .art-bluebell > span, .art-garden > span, .art-sunset > span, .art-lilac > span { display: none !important; }
.art-aurora:before, .art-poppy:before, .art-bluebell:before, .art-garden:before, .art-sunset:before, .art-lilac:before { border-radius: 50% 50% 18% 18%; box-shadow: none !important; mix-blend-mode: normal; }.art-aurora:after, .art-poppy:after, .art-bluebell:after, .art-garden:after, .art-sunset:after, .art-lilac:after { border-radius: 50%; mix-blend-mode: normal; }
.art-aurora:before { top: auto; right: 9%; bottom: 8%; left: auto; width: 42%; height: 42%; }.art-aurora:after { top: 14%; right: auto; bottom: auto; left: 14%; width: 17%; height: 17%; }
.art-poppy:before { top: auto; right: auto; bottom: -8%; left: 18%; width: 38%; height: 68%; }.art-poppy:after { top: 16%; right: 14%; bottom: auto; left: auto; width: 20%; height: 20%; }
.art-bluebell:before { top: auto; right: 14%; bottom: -8%; left: auto; width: 40%; height: 68%; }.art-bluebell:after { top: 14%; right: auto; bottom: auto; left: 15%; width: 18%; height: 18%; }
.art-garden:before { top: auto; right: auto; bottom: -10%; left: 31%; width: 38%; height: 70%; }.art-garden:after { top: 15%; right: 14%; bottom: auto; left: auto; width: 18%; height: 18%; }
.art-sunset:before { top: auto; right: auto; bottom: -8%; left: 25%; width: 44%; height: 69%; }.art-sunset:after { top: 15%; right: 13%; bottom: auto; left: auto; width: 18%; height: 18%; }
.art-lilac:before { top: auto; right: auto; bottom: -8%; left: 28%; width: 39%; height: 68%; }.art-lilac:after { top: 16%; right: 14%; bottom: auto; left: auto; width: 18%; height: 18%; }
.post-visual:after { opacity: .88; }.post-visual { isolation: isolate; }

/* Recherche : la lecture passe avant le cadre. */
.search-hero { padding-bottom: 42px; }.big-search { border-width: 1px; transition: border-color .16s ease, box-shadow .16s ease; }.big-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 17%, transparent); }.big-search button { min-width: 112px; }.filters { padding-top: 8px; }.filter-heading h2 { font-size: 17px; }.results-top { padding-bottom: 8px; }.artist-grid { gap: 16px; }.artist-result { overflow: hidden; border-radius: var(--radius); }.artist-result:hover { border-color: color-mix(in oklch, var(--primary) 70%, var(--border)); box-shadow: 0 10px 26px color-mix(in oklch, var(--primary) 16%, transparent); transform: translateY(-2px); }.result-art { position: relative; }.result-art:before { content: "APERÇU PORTFOLIO"; position: absolute; z-index: 3; top: 10px; left: 10px; padding: 4px 6px; color: var(--primary-foreground); background: color-mix(in oklch, var(--primary) 82%, transparent); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .05em; }.result-info { padding: 14px; }.result-info h3 { margin-top: 5px; }.result-meta { margin-top: 3px; }.result-tags { margin-top: 12px; }

/* Profil, commandes et messages : mêmes espacements et mêmes surfaces. */
.artist-cover { overflow: hidden; }.profile-actions { gap: 10px; }.page-header { padding-bottom: 28px; }.order-card { padding: 19px; }.order-card:hover { border-color: color-mix(in oklch, var(--primary) 50%, var(--border)); }.messages-layout { overflow: hidden; }.conversation { border-left: 2px solid transparent; }.conversation.active { border-left-color: var(--primary-foreground); }.chat-compose { background: var(--card); }.modal { border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); }.commission-option { transition: border-color .16s ease, background .16s ease; }.commission-option:hover { border-color: var(--primary); }.publish-guideline { margin: 18px 0 21px; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); color: var(--muted-foreground); background: var(--secondary); font-size: 11px; line-height: 1.45; }

body:not(.dark) { background: color-mix(in oklch, var(--background) 94%, var(--primary) 6%); }body:not(.dark) .sidebar { background: var(--sidebar-ui); }body:not(.dark) .view { background: transparent; }body:not(.dark) .post-caption { text-shadow: 0 1px 10px rgba(0,0,0,.28); }
body.dark .feed-scroller { box-shadow: 0 16px 40px rgba(0,0,0,.28); }body.dark .result-art:before { background: color-mix(in oklch, var(--primary) 76%, #000); }body.dark .mini-card:hover { background: color-mix(in oklch, var(--card) 92%, var(--primary) 8%); }

/* Espace créateur : une vraie vitrine, au même niveau que le profil d'artiste. */
.creator-profile { padding-top: 26px; }
.creator-cover { position: relative; height: 176px; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) + 8px); background: linear-gradient(112deg, var(--chart-5), var(--chart-3) 48%, var(--chart-1)); isolation: isolate; }.creator-cover::before, .creator-cover::after { content: ""; position: absolute; z-index: 0; border-radius: 999px; }.creator-cover::before { width: 310px; height: 310px; right: 8%; bottom: -215px; background: color-mix(in oklch, var(--primary-foreground) 38%, transparent); }.creator-cover::after { width: 230px; height: 230px; left: 11%; top: -150px; border: 30px solid color-mix(in oklch, var(--primary-foreground) 24%, transparent); }.creator-cover span { position: absolute; z-index: 1; display: block; width: 12px; height: 12px; background: var(--primary-foreground); border-radius: 50%; opacity: .88; }.creator-cover span:nth-child(1) { top: 38px; left: 49%; }.creator-cover span:nth-child(2) { top: 72px; right: 19%; width: 8px; height: 8px; }.creator-cover span:nth-child(3) { bottom: 37px; left: 30%; width: 7px; height: 7px; }
.creator-profile-head { position: relative; display: flex; align-items: center; gap: 16px; margin: -42px 28px 30px; }
.creator-avatar { width: 86px; height: 86px; border-width: 5px; font-size: 36px; }
.creator-profile-head h1 { margin-bottom: 0; font-size: clamp(30px, 3vw, 38px); }
.creator-profile-head .eyebrow { margin-bottom: 3px; }
.creator-workspace { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 30px; margin: 0 28px; }
.creator-sidebar { display: grid; align-content: start; gap: 14px; }
.creator-side-card { padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm-ui); }
.creator-side-card h2 { margin: 12px 0 7px; color: var(--card-foreground); font-size: 21px; line-height: 1.02; }
.creator-side-card > p:not(.card-kicker) { margin-bottom: 16px; color: var(--muted-foreground); font-size: 12px; line-height: 1.55; }
.card-kicker { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.card-kicker .mini-icon { display: grid; width: 20px; height: 20px; place-items: center; color: var(--primary-foreground); background: var(--primary); border-radius: 6px; font-family: inherit; }
.completion-track { height: 6px; overflow: hidden; border-radius: 99px; background: var(--secondary); }
.completion-track span { display: block; width: 92%; height: 100%; border-radius: inherit; background: var(--primary); }
.completion-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 11px; }
.completion-meta b { color: var(--card-foreground); }.completion-meta button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 11px; font-weight: 700; }
.creator-links { display: grid; gap: 9px; }.creator-links .card-kicker { margin-bottom: 3px; }.creator-links a { display: flex; justify-content: space-between; color: var(--card-foreground); font-size: 12px; font-weight: 600; text-decoration: none; }.creator-links a span { color: var(--primary); }.creator-links a:hover { color: var(--primary); }
.human-art-note { display: flex; gap: 9px; margin-top: 7px; padding-top: 13px; border-top: 1px solid var(--border); }.human-art-note > span { display: grid; flex: 0 0 auto; place-items: center; width: 21px; height: 21px; color: var(--primary-foreground); background: var(--primary); border-radius: 50%; font-size: 11px; }.human-art-note p { margin: 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.45; }.human-art-note b { display: block; color: var(--card-foreground); margin-bottom: 2px; }
.creator-main { min-width: 0; }.creator-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.creator-metrics article { min-height: 132px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm-ui); }.creator-metrics span, .creator-metrics small { display: block; color: var(--muted-foreground); font-size: 11px; }.creator-metrics b { display: block; margin: 17px 0 3px; color: var(--card-foreground); font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; font-size: 32px; line-height: .9; letter-spacing: -.06em; }.creator-metrics small { color: var(--primary); font-weight: 700; }
.creator-section-heading { display: flex; align-items: end; justify-content: space-between; margin-top: 30px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }.creator-section-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }.creator-section-heading h2 { margin: 0; color: var(--card-foreground); font-size: 25px; }.creator-section-heading .text-button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 12px; font-weight: 700; }
.creator-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }.creator-work { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 188px; padding: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); color: var(--primary-foreground); isolation: isolate; }.creator-work::before, .creator-work::after { z-index: 0; }.creator-work .work-label { position: relative; z-index: 2; align-self: flex-start; padding: 4px 6px; color: var(--primary-foreground); background: color-mix(in oklch, var(--background) 25%, transparent); border: 1px solid color-mix(in oklch, var(--primary-foreground) 23%, transparent); border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .03em; }.creator-work > button { position: absolute; z-index: 2; top: 9px; right: 10px; width: 28px; height: 25px; border: 1px solid color-mix(in oklch, var(--primary-foreground) 24%, transparent); border-radius: 7px; color: var(--primary-foreground); background: color-mix(in oklch, var(--background) 24%, transparent); line-height: 1; }.creator-work > div { position: relative; z-index: 2; }.creator-work b, .creator-work small { display: block; }.creator-work b { margin-bottom: 3px; font-size: 13px; }.creator-work small { color: color-mix(in oklch, var(--primary-foreground) 75%, transparent); font-size: 10px; }
.orders-heading { margin-top: 29px; }.creator-request-list { display: grid; gap: 8px; margin-top: 13px; }.creator-request-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--card); }.creator-request-list .avatar { width: 34px; height: 34px; font-size: 14px; }.creator-request-list b { color: var(--card-foreground); font-size: 12px; }.creator-request-list p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 10px; }.request-status { padding: 4px 6px; color: var(--primary-foreground); background: var(--primary); border-radius: 5px; font-size: 9px; font-weight: 700; }.muted-status { color: var(--secondary-foreground); background: var(--secondary); }.creator-request-list .secondary-button { min-height: 32px; padding: 0 10px; font-size: 10px; }

body.dark .creator-side-card, body.dark .creator-metrics article, body.dark .creator-request-list article { box-shadow: 0 8px 24px rgba(0,0,0,.14); }.creator-side-card:hover, .creator-metrics article:hover, .creator-request-list article:hover { border-color: color-mix(in oklch, var(--primary) 50%, var(--border)); }

@media (max-width: 780px) { .artist-grid { gap: 10px; }.result-art:before { top: 8px; left: 8px; font-size: 7px; }.result-info { padding: 11px; }.search-hero { padding-bottom: 30px; } }

@media (max-width: 960px) { .creator-workspace { grid-template-columns: 1fr; }.creator-sidebar { grid-template-columns: 1fr 1fr; }.creator-profile-head, .creator-workspace { margin-left: 0; margin-right: 0; } }
@media (max-width: 780px) { .creator-profile { padding-top: 18px; }.creator-cover { height: 142px; }.creator-profile-head { flex-wrap: wrap; gap: 11px; margin-top: -36px; margin-bottom: 22px; }.creator-avatar { width: 74px; height: 74px; font-size: 31px; }.creator-profile-head h1 { font-size: 28px; }.creator-profile-head .profile-actions { width: 100%; margin: 4px 0 0; }.creator-profile-head .profile-actions button { flex: 1; }.creator-sidebar { grid-template-columns: 1fr; }.creator-metrics { grid-template-columns: repeat(3, 1fr); gap: 7px; }.creator-metrics article { min-height: 104px; padding: 11px; }.creator-metrics b { margin-top: 12px; font-size: 24px; }.creator-metrics span, .creator-metrics small { font-size: 9px; }.creator-section-heading { margin-top: 24px; }.creator-section-heading h2 { font-size: 22px; }.creator-portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.creator-work { min-height: 152px; }.creator-work:last-child { grid-column: 1 / -1; }.creator-request-list article { grid-template-columns: auto minmax(0, 1fr) auto; }.creator-request-list .secondary-button { display: none; }.request-status { font-size: 8px; } }

/* Prix fixes : les conditions sont visibles avant d'envoyer la demande. */
.artist-pricing { margin: 20px 0 2px; padding: 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--secondary); }
.pricing-kicker, .summary-kicker { margin: 0 0 9px; color: var(--primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.pricing-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in oklch, var(--border) 78%, transparent); color: var(--card-foreground); font-size: 11px; }
.pricing-row b { flex: 0 0 auto; font-size: 12px; }.fixed-price-note { margin: 10px 0 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.45; }
.order-modal-content { width: min(100%, 590px); }.order-modal-content .commission-options { margin-bottom: 14px; }.commission-option strong { color: var(--primary); white-space: nowrap; }
/* Les aperçus des prestations restent contenus dans leur vignette, y compris dans la modale. */
.commission-option > .option-art { position: relative; display: block; flex: 0 0 45px; min-width: 45px; min-height: 45px; isolation: isolate; }.commission-option > .option-art::before, .commission-option > .option-art::after { pointer-events: none; }
.artist-tab-panel { padding-top: 18px; }.artist-tab-panel[hidden] { display: none; }.artist-panel-intro { margin: 0 0 12px; color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }.artist-commission-list, .artist-review-list { display: grid; gap: 9px; }.artist-commission { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card); }.artist-commission-art { position: relative; display: block; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; isolation: isolate; }.artist-commission-art::before, .artist-commission-art::after { pointer-events: none; }.artist-commission h2 { margin: 0 0 3px; color: var(--card-foreground); font-size: 13px; }.artist-commission p { margin: 0; color: var(--muted-foreground); font-size: 10px; }.artist-commission > strong { color: var(--primary); font-size: 12px; white-space: nowrap; }.artist-commission .secondary-button { min-height: 32px; padding: 0 11px; }.artist-review { position: relative; padding: 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card); }.artist-review > div { display: grid; grid-template-columns: 27px 1fr; column-gap: 8px; align-items: center; }.artist-review .avatar { grid-row: span 2; width: 27px; height: 27px; font-size: 12px; }.artist-review b { color: var(--card-foreground); font-size: 12px; }.artist-review small { color: var(--muted-foreground); font-size: 10px; }.artist-review p { margin: 11px 0 0; color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }.review-rating { position: absolute; top: 15px; right: 14px; color: var(--primary); font-size: 11px; letter-spacing: .05em; }
.brief-field { display: grid; gap: 5px; margin: 0 0 14px; color: var(--card-foreground); font-size: 12px; font-weight: 700; }.brief-field > span { color: var(--muted-foreground); font-size: 10px; font-weight: 400; line-height: 1.35; }.brief-field textarea { width: 100%; min-height: 68px; resize: vertical; padding: 9px 10px; border: 1px solid var(--input); border-radius: 9px; outline: 0; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 11px; }.brief-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent); }
.order-price-summary { display: grid; gap: 7px; margin: 0 0 17px; padding: 13px 14px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--secondary); }.order-price-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted-foreground); font-size: 11px; }.order-price-summary > div > b { flex: 0 0 auto; color: var(--card-foreground); font-size: 11px; }.order-price-summary .summary-total { margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--border); color: var(--card-foreground); font-weight: 700; }.order-price-summary .summary-total > b { color: var(--primary); font-size: 14px; }.artist-net-note { margin: 2px 0 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.4; }.artist-net-note b { color: var(--card-foreground); }
body.dark .artist-pricing, body.dark .order-price-summary { background: color-mix(in oklch, var(--card) 89%, var(--primary) 11%); }
@media (max-width: 780px) { .artist-pricing { margin-bottom: 0; }.order-modal-content { width: min(100%, 560px); }.order-price-summary { padding: 12px; }.brief-field textarea { min-height: 62px; }.artist-commission { grid-template-columns: 44px minmax(0, 1fr) auto; }.artist-commission-art { width: 44px; height: 44px; }.artist-commission .secondary-button { grid-column: 2 / -1; width: 100%; }.review-rating { position: static; display: inline-block; margin-top: 10px; } }

/* Interactions audit : cartes, onglets et modales ont tous un état visible. */
.portfolio-card, .collection { border: 0; font: inherit; text-align: left; cursor: pointer; }.portfolio-card { width: 100%; padding: 0; }.portfolio-card:focus-visible, .collection:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }.artist-social-link { padding: 0; border: 0; color: var(--primary); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.artist-social-link:hover { text-decoration: underline; text-underline-offset: 3px; }.order-tab-panel[hidden] { display: none; }.order-tab-panel .order-card { margin-top: 18px; }.status.complete { color: var(--primary-foreground); background: var(--primary); }.creator-links button { display: flex; justify-content: space-between; width: 100%; padding: 0; border: 0; color: var(--card-foreground); background: transparent; font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }.creator-links button span { color: var(--primary); }.creator-links button:hover { color: var(--primary); }.brief-preview { display: grid; gap: 12px; margin: 19px 0; padding: 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--secondary); }.brief-preview p { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }.brief-preview p:first-child { display: grid; gap: 4px; }.brief-preview b { color: var(--card-foreground); font-size: 14px; }.brief-preview small { color: var(--primary); font-size: 10px; line-height: 1.4; }.artwork-preview { position: relative; height: 205px; margin-bottom: 18px; overflow: hidden; border-radius: calc(var(--radius) - 1px); }.artwork-preview::before, .artwork-preview::after { z-index: 0; }.artwork-actions { display: flex; gap: 10px; margin-top: 20px; }.artwork-actions button { flex: 1; }.edit-profile-modal-content form, .publish-modal-content form { display: grid; gap: 15px; margin-top: 18px; }.edit-profile-modal-content label, .publish-modal-content form > label:not(.upload-drop) { display: grid; gap: 7px; margin: 0; color: var(--card-foreground); font-size: 12px; font-weight: 700; }.edit-profile-modal-content input, .edit-profile-modal-content textarea, .publish-modal-content form input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--input); border-radius: 9px; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 12px; resize: vertical; }.upload-drop { cursor: pointer; }.upload-drop:hover { border-color: var(--primary); }.upload-drop:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent); }

@media (max-width: 780px) { .artwork-preview { height: 165px; }.artwork-actions { flex-direction: column; }.order-tab-panel .order-card { margin-top: 13px; } }