/*
  MOSALEA — système visuel v1
  Une galerie contemporaine : la couleur de marque guide l'action,
  l'œuvre reste l'élément le plus expressif de chaque écran.
*/

:root {
  /* Fond, texte et surfaces */
  --background: #f7f2e9;
  --foreground: #211b17;
  --card: #fffcf7;
  --card-foreground: #211b17;
  --popover: #fffcf7;
  --popover-foreground: #211b17;
  --secondary: #eee5d8;
  --secondary-foreground: #6a3024;
  --muted-ui: #eee5d8;
  --muted-foreground: #766b62;
  --accent: #f2dacf;
  --accent-foreground: #211b17;
  --border: #dcd0c1;
  --input: #b8a999;
  --ring: #c8462b;

  /* Couleurs d'identité : terre cuite, prune, ocre. */
  --primary: #c8462b;
  --primary-foreground: #fffaf4;
  --destructive: #b63131;
  --brand-vermilion: #c8462b;
  --brand-plum: #66425f;
  --brand-ochre: #c18b2d;
  --brand-clay: #dc9b72;

  --sidebar-ui: #f0e8dc;
  --sidebar-foreground-ui: #211b17;
  --sidebar-primary: #c8462b;
  --sidebar-primary-foreground: #fffaf4;
  --sidebar-accent: #e8dbcc;
  --sidebar-accent-foreground: #211b17;
  --sidebar-border: #d6c8b8;
  --sidebar-ring: #c8462b;
  --radius: .55rem;
  --shadow-sm-ui: 0 2px 10px rgba(52, 37, 26, .055);
  --shadow-md-ui: 0 14px 40px rgba(52, 37, 26, .085);

  --paper: var(--background);
  --ink: var(--foreground);
  --line: var(--border);
  --sidebar: var(--sidebar-ui);
  --lilac: var(--primary);
  --lilac-dark: var(--foreground);
  --lavender: var(--secondary);
  --peach: var(--brand-clay);
  --mint: var(--accent);
  --shadow: var(--shadow-md-ui);
}

body.dark {
  --background: #191512;
  --foreground: #f6eee4;
  --card: #25201b;
  --card-foreground: #f6eee4;
  --popover: #2b251f;
  --popover-foreground: #f6eee4;
  --secondary: #342b24;
  --secondary-foreground: #ffc1ae;
  --muted-ui: #342b24;
  --muted-foreground: #c1b3a5;
  --accent: #422c28;
  --accent-foreground: #f6eee4;
  --border: #4b3d32;
  --input: #705d4c;
  --ring: #f07758;
  --primary: #f07758;
  --primary-foreground: #221713;
  --destructive: #f18976;
  --brand-vermilion: #f07758;
  --brand-plum: #c99ac0;
  --brand-ochre: #e2b65b;
  --brand-clay: #f1b084;
  --sidebar-ui: #201a16;
  --sidebar-foreground-ui: #f6eee4;
  --sidebar-primary: #f07758;
  --sidebar-primary-foreground: #221713;
  --sidebar-accent: #342b24;
  --sidebar-accent-foreground: #f6eee4;
  --sidebar-border: #4b3d32;
  --sidebar-ring: #f07758;
  --shadow-sm-ui: 0 2px 12px rgba(0, 0, 0, .15);
  --shadow-md-ui: 0 16px 44px rgba(0, 0, 0, .23);
}

/* Règle 1 — le mot-symbole est calme, le monogramme signe l'interface. */
.brand {
  gap: 9px;
  padding-left: 0;
  color: var(--sidebar-foreground-ui);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 31px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.06em;
}
.brand-symbol {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  color: var(--brand-vermilion);
}
.sidebar-toggle {
  border-color: var(--border);
  border-radius: 5px;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}
.sidebar.is-collapsed .brand { display: grid; }
.sidebar.is-collapsed .brand > span { display: none; }
.sidebar.is-collapsed .brand-symbol { width: 31px; height: 31px; }

/* Règle 2 — des bords nets, presque éditoriaux ; aucun effet “application IA”. */
.sidebar,
.artist-result,
.mini-card,
.order-card,
.messages-layout,
.creator-side-card,
.creator-metrics article,
.creator-request-list article,
.modal,
.commission-option,
.artist-commission,
.artist-review,
.artist-pricing,
.order-price-summary,
.big-search,
.profile-pill {
  border-radius: 8px;
}
.feed-scroller { border-radius: 10px; }
.post-actions .post-action,
.ghost-icon,
.next-art,
.round-button,
.primary-button,
.secondary-button,
.create-button,
.filter-chips button,
.tag-row button,
.result-tags span,
.profile-tags span,
.content-label { border-radius: 5px; }
.artist-cover { border-radius: 10px; }
.portfolio-card,
.artist-commission-art { border-radius: 7px; }

/* Règle 3 — une couleur forte indique une action, jamais une décoration massive. */
.nav-link.active {
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: inset 3px 0 0 var(--brand-ochre);
}
.nav-link:hover { color: var(--foreground); background: var(--sidebar-accent); }
.create-button,
.primary-button,
.big-search button,
.chat-compose button {
  color: var(--primary-foreground);
  background: var(--primary);
}
.create-button:hover,
.primary-button:hover,
.big-search button:hover,
.chat-compose button:hover {
  color: var(--primary-foreground);
  background: #a93722;
}
body.dark .create-button:hover,
body.dark .primary-button:hover,
body.dark .big-search button:hover,
body.dark .chat-compose button:hover { background: #ff9a80; }
.secondary-button:hover,
.round-button:hover,
.post-action:hover,
.post-action.liked,
.post-action.saved,
.next-art:hover {
  color: var(--primary-foreground);
  border-color: var(--primary);
  background: var(--primary);
}
.feed-tab.active,
.profile-tabs button.active,
.order-tabs button.active { border-color: var(--primary); }
.text-button,
.back-link,
.popular-searches button,
.availability,
.result-price,
.artist-social-link,
.pricing-kicker,
.summary-kicker,
.card-kicker { color: var(--primary); }
.filter-chips button.selected,
.check input:checked + span,
.status.progress,
.request-status,
.completion-track span,
.progress-track span,
.verified,
.mini-icon,
.shield,
.human-art-note > span { background: var(--primary); }

/* Règle 4 — la texture est physique, très discrète, jamais illustrative. */
body::before { opacity: .035; mix-blend-mode: multiply; }
body.dark::before { opacity: .022; mix-blend-mode: screen; }
.view > header,
.page-header { position: relative; }
.eyebrow,
.visual-stamp,
.scroll-cue,
.pricing-kicker,
.summary-kicker,
.card-kicker {
  color: var(--brand-plum);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .105em;
}
body.dark .eyebrow,
body.dark .visual-stamp,
body.dark .scroll-cue,
body.dark .pricing-kicker,
body.dark .summary-kicker,
body.dark .card-kicker { color: var(--brand-clay); }

/* Règle 5 — des éléments d'interface lisibles dans les deux thèmes. */
.theme-icon,
.notification-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.round-button { display: grid; place-items: center; color: var(--foreground); background: var(--card); }
.round-button .theme-icon { width: 17px; height: 17px; }
.notification { color: var(--foreground); }
.bubble.mine { color: var(--primary-foreground); background: var(--primary); }
body:not(.dark) .bubble.mine { color: var(--primary-foreground); }
.bubble:not(.mine) { background: var(--secondary); }
.profile-pill { border: 1px solid var(--border); background: transparent; }
.profile-pill:hover { border-color: var(--primary); background: var(--sidebar-accent); }
.status.pending { color: #fff8f2; background: var(--destructive); }
.feed-status i { background: var(--brand-ochre); }

/* Couleur réservée aux contenus éditoriaux et aux états secondaires. */
.artist-cover { background: linear-gradient(115deg, #8b4a55, var(--brand-plum) 48%, #cc7954); }
body.dark .artist-cover { background: linear-gradient(115deg, #763d49, #5a3b5c 48%, #b95f46); }
.creator-cover { background: linear-gradient(115deg, #b64c45, var(--brand-plum) 49%, #d28a59); }
body.dark .creator-cover { background: linear-gradient(115deg, #843b3e, #5b3a58 49%, #bb6549); }
.tag-row button,
.profile-tags span,
.result-tags span { color: var(--secondary-foreground); background: var(--secondary); }

@media (max-width: 780px) {
  .sidebar.is-collapsed .brand { display: none; }
  .nav-link.active { box-shadow: inset 0 2px 0 var(--brand-ochre); }
  .create-button { border-radius: 6px; }
}

/* Direction bleue — cyanotype contemporain, sans bleu électrique. */
:root {
  --background: #f3f6f7;
  --foreground: #16252d;
  --card: #fcfdfd;
  --card-foreground: #16252d;
  --popover: #fcfdfd;
  --popover-foreground: #16252d;
  --secondary: #e2edf1;
  --secondary-foreground: #205f79;
  --muted-ui: #e2edf1;
  --muted-foreground: #687a83;
  --accent: #d5e7ee;
  --accent-foreground: #16252d;
  --border: #cbdadf;
  --input: #a6bac2;
  --ring: #246b86;
  --primary: #246b86;
  --primary-foreground: #f6fbfc;
  --destructive: #c95242;
  --brand-blue: #246b86;
  --brand-ink: #173946;
  --brand-sky: #78bdd3;
  --brand-coral: #d66e54;
  --sidebar-ui: #eaf1f3;
  --sidebar-foreground-ui: #16252d;
  --sidebar-primary: #246b86;
  --sidebar-primary-foreground: #f6fbfc;
  --sidebar-accent: #dce9ed;
  --sidebar-accent-foreground: #16252d;
  --sidebar-border: #cbdadf;
  --sidebar-ring: #246b86;
  --shadow-sm-ui: 0 2px 10px rgba(29, 59, 72, .055);
  --shadow-md-ui: 0 14px 40px rgba(29, 59, 72, .085);
  --peach: var(--brand-coral);
}

body.dark {
  --background: #101b22;
  --foreground: #edf5f6;
  --card: #17272f;
  --card-foreground: #edf5f6;
  --popover: #1c3039;
  --popover-foreground: #edf5f6;
  --secondary: #203640;
  --secondary-foreground: #a7dceb;
  --muted-ui: #203640;
  --muted-foreground: #afc0c6;
  --accent: #203945;
  --accent-foreground: #edf5f6;
  --border: #31505c;
  --input: #58737e;
  --ring: #78c4da;
  --primary: #62b6d0;
  --primary-foreground: #102127;
  --destructive: #ee8a73;
  --brand-blue: #62b6d0;
  --brand-ink: #c9eaf3;
  --brand-sky: #a9ddeb;
  --brand-coral: #f0a08c;
  --sidebar-ui: #132129;
  --sidebar-foreground-ui: #edf5f6;
  --sidebar-primary: #62b6d0;
  --sidebar-primary-foreground: #102127;
  --sidebar-accent: #203640;
  --sidebar-accent-foreground: #edf5f6;
  --sidebar-border: #31505c;
  --sidebar-ring: #62b6d0;
}

.brand-symbol { color: var(--brand-blue); }
.brand-symbol path { stroke: none; }
.brand-symbol .tile-main { fill: var(--brand-blue); }
.brand-symbol .tile-ink { fill: var(--brand-ink); }
.brand-symbol .tile-sky { fill: var(--brand-sky); }

/* Barre réduite : le signe est une signature, pas un second bouton accolé au menu. */
.sidebar { overflow: visible; }
.sidebar-header { position: relative; }
.sidebar .sidebar-toggle {
  position: absolute;
  top: 0;
  right: -60px;
  z-index: 12;
  width: 32px;
  height: 32px;
  border-color: var(--border);
  color: var(--muted-foreground);
  background: var(--sidebar-ui);
}
.sidebar .sidebar-toggle:hover,
.sidebar .sidebar-toggle:focus-visible {
  border-color: var(--border);
  color: var(--primary-foreground);
  background: var(--primary);
}
.sidebar.is-collapsed .sidebar-header { display: flex; justify-content: center; }
.sidebar.is-collapsed .brand { display: grid; padding: 0; line-height: 1; }
.sidebar.is-collapsed .brand-symbol { width: 30px; height: 30px; }
.sidebar.is-collapsed .sidebar-toggle { right: -52px; }
.sidebar.is-collapsed .main-nav { margin-top: 38px; }

/* Contraste : aucun pictogramme ne doit disparaître sur son état actif. */
body:not(.dark) .brand-symbol .tile-ink { fill: #123a49; }
body:not(.dark) .brand-symbol .tile-main { fill: #1f6681; }
body:not(.dark) .brand-symbol .tile-sky { fill: #3f91ae; }
body:not(.dark) .sidebar .sidebar-toggle {
  border-color: #a8c6d0;
  color: #245d72;
  background: #f8fcfd;
}
body:not(.dark) .nav-link.active {
  color: #f7fbfc;
  background: #246b86;
  box-shadow: inset 3px 0 0 #b9e4ef;
}
body:not(.dark) .nav-link.active .nav-icon { color: currentColor; }
body.dark .nav-link.active {
  color: #edf5f6;
  background: #203640;
  box-shadow: inset 3px 0 0 #a9ddeb;
}
body.dark .nav-link.active .nav-icon { color: #a9ddeb; }
.nav-link.active .nav-icon,
.create-button svg,
.primary-button svg,
.big-search button svg,
.chat-compose .send-button svg { color: currentColor; }
.nav-link.active { box-shadow: inset 3px 0 0 var(--brand-sky); }
.create-button:hover,
.primary-button:hover,
.big-search button:hover,
.chat-compose button:hover { background: #18536a; }
body.dark .create-button:hover,
body.dark .primary-button:hover,
body.dark .big-search button:hover,
body.dark .chat-compose button:hover { background: #a9ddeb; }
.eyebrow,
.visual-stamp,
.scroll-cue,
.pricing-kicker,
.summary-kicker,
.card-kicker { color: var(--brand-ink); }
body.dark .eyebrow,
body.dark .visual-stamp,
body.dark .scroll-cue,
body.dark .pricing-kicker,
body.dark .summary-kicker,
body.dark .card-kicker { color: var(--brand-sky); }
.feed-status i { background: var(--brand-coral); }
.artist-cover { background: linear-gradient(115deg, #1c5870, var(--brand-blue) 48%, #78bdd3); }
body.dark .artist-cover { background: linear-gradient(115deg, #153a50, #2b6c84 48%, #59abc7); }
.creator-cover { background: linear-gradient(115deg, #205b72, var(--brand-blue) 49%, #86cbe0); }
body.dark .creator-cover { background: linear-gradient(115deg, #174257, #2b6c84 49%, #62b6d0); }
@media (max-width: 780px) { .nav-link.active { box-shadow: inset 0 2px 0 var(--brand-sky); } }

/* États interactifs : même langage Mosalea en clair, sombre et mobile. */
.filters summary span {
  display: inline-block;
  transition: transform .16s ease;
}
.filters details[open] summary span { transform: rotate(180deg); }
.availability.is-closed { color: var(--muted-foreground); }

body:not(.dark) .conversation.active {
  color: #f7fbfc;
  background: #246b86;
  border-left-color: #b9e4ef;
}
body:not(.dark) .conversation.active small,
body:not(.dark) .conversation.active time { color: rgba(247, 251, 252, .78); }
body.dark .conversation.active {
  color: #edf5f6;
  background: #203640;
  border-left-color: #a9ddeb;
}
body.dark .conversation.active small,
body.dark .conversation.active time { color: rgba(237, 245, 246, .74); }

body:not(.dark) .bubble.mine {
  color: #f7fbfc;
  background: #246b86;
}
body:not(.dark) .bubble.mine time { color: rgba(247, 251, 252, .78); }
body.dark .bubble.mine {
  color: #102127;
  background: #62b6d0;
}
body.dark .bubble.mine time { color: rgba(16, 33, 39, .72); }

/* Compte Mosalea : champs et choix d'accès dans le langage du reste de l'interface. */
.auth-modal-content { width: min(470px, calc(100vw - 32px)); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 22px 0 18px; }
.auth-tabs button { min-height: 38px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-foreground); background: transparent; font: inherit; font-size: 13px; font-weight: 700; }
.auth-tabs button.active { border-color: var(--brand-sky); color: var(--brand-ink); background: color-mix(in srgb, var(--brand-sky) 19%, transparent); }
body.dark .auth-tabs button.active { color: var(--brand-sky); }
#auth-form { display: grid; gap: 13px; }
#auth-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
#auth-form input { min-height: 43px; width: 100%; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; padding: 0 12px; }
#auth-form input:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }
.auth-help { color: var(--muted-foreground); font-size: 11px; line-height: 1.5; margin: 0; }
.auth-account { display: grid; gap: 14px; }
.auth-account > p { color: var(--muted-foreground); margin: 0; line-height: 1.5; }

.edit-profile-modal-content,
.onboarding-modal-content { width: min(590px, calc(100vw - 32px)); }
[data-profile-form] { display: grid; gap: 14px; }
[data-profile-form] label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
[data-profile-form] label > small { color: var(--muted-foreground); font-size: 10px; font-weight: 500; line-height: 1.4; }
[data-profile-form] input:not([type="checkbox"]),
[data-profile-form] select,
[data-profile-form] textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; padding: 10px 12px; }
[data-profile-form] input:not([type="checkbox"]),
[data-profile-form] select { min-height: 43px; }
[data-profile-form] textarea { resize: vertical; line-height: 1.45; }
[data-profile-form] input:focus,
[data-profile-form] select:focus,
[data-profile-form] textarea:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }
[data-profile-form] .profile-check { display: flex; align-items: flex-start; gap: 9px; color: var(--muted-foreground); font-weight: 500; line-height: 1.4; }
[data-profile-form] .profile-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-blue); }
.artist-profile-fields { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--brand-sky); background: color-mix(in srgb, var(--brand-sky) 9%, transparent); }
.onboarding-modal-content { max-height: min(780px, calc(100dvh - 32px)); overflow-y: auto; }
.onboarding-section-title { margin: 0; color: var(--primary); font-size: 12px; font-weight: 800; }

.creator-work-uploaded { background: #173848; }
.creator-work-uploaded::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 20, 26, .06), rgba(8, 20, 26, .78)); }
.creator-work-uploaded::after { display: none; }
.creator-work-media { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolio-empty { grid-column: 1 / -1; }

#live-feed { display: grid; gap: 18px; }
.live-post-visual { background: #183845; }
.live-post-media { width: 100%; height: 100%; object-fit: cover; }
.result-art-public { overflow: hidden; background: #183845; }
.result-public-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-card-live { position: relative; overflow: hidden; background: #183845; }
.portfolio-card-live::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(8, 20, 26, .78)); }
.portfolio-live-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-card-live > span { position: absolute; z-index: 1; right: 10px; bottom: 9px; left: 10px; overflow: hidden; color: #fff; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.artwork-preview-live { background: #183845; }
.live-artwork-media { width: 100%; height: 100%; object-fit: contain; background: #0b1c24; }
.saved-real-artworks { margin: 0 28px 28px; }
.saved-real-artworks .creator-section-heading { margin: 0 0 16px; }
@media (max-width: 780px) { .saved-real-artworks { margin: 0 18px 24px; } }

.creator-offer-list { display: grid; gap: 10px; margin-top: 14px; }
.creator-offer,
.offers-empty { border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
.creator-offer { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 15px; }
.creator-offer > div { min-width: 0; }
.creator-offer span { display: inline-block; margin-bottom: 6px; padding: 3px 6px; color: var(--primary-foreground); background: var(--primary); border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.creator-offer.is-closed span { color: var(--muted-foreground); background: var(--secondary); }
.creator-offer h3,
.offers-empty h3 { margin: 0; color: var(--card-foreground); font-size: 15px; }
.creator-offer p,
.offers-empty p { margin: 5px 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
.creator-offer small { color: var(--muted-foreground); font-size: 10px; }
.creator-offer > strong { flex: 0 0 auto; color: var(--primary); font-size: 13px; }
.offers-empty { margin-top: 14px; padding: 16px; }
.offers-empty .secondary-button { margin-top: 7px; }

.offer-modal-content { width: min(580px, calc(100vw - 32px)); }
#offer-form { display: grid; gap: 14px; margin-top: 18px; }
#offer-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
#offer-form input:not([type="checkbox"]),
#offer-form select,
#offer-form textarea { width: 100%; box-sizing: border-box; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; }
#offer-form textarea { resize: vertical; min-height: 78px; }
#offer-form input:focus,
#offer-form select:focus,
#offer-form textarea:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }
.offer-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-order-list { display: grid; gap: 10px; margin-top: 18px; }
.live-order-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
.live-order-card p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 12px; }
.live-order-card strong { color: var(--card-foreground); font-size: 15px; }
.live-conversation { margin-top: 5px; }
.chat-empty { max-width: 310px; margin: 28px auto; color: var(--muted-foreground); font-size: 12px; line-height: 1.55; text-align: center; }
@media (max-width: 780px) { .creator-offer { display: grid; gap: 8px; }.offer-form-grid { grid-template-columns: 1fr; } .live-order-card { align-items: start; flex-direction: column; } }

.chat-quote-panel:not(:empty) { display: grid; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--brand-sky) 6%, transparent); }
.quote-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
.quote-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quote-card-head b { color: var(--card-foreground); font-size: 20px; }
.quote-card-head span { color: var(--muted-foreground); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.quote-card p { margin: 0; color: var(--card-foreground); font-size: 13px; line-height: 1.5; }
.quote-card small { display: block; color: var(--muted-foreground); font-size: 11px; }
.quote-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.quote-card-actions button { flex: 1; }
.quote-open-form-button { justify-self: start; }
.quote-history { display: grid; gap: 6px; margin-top: 2px; }
.quote-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted-foreground); font-size: 11px; background: var(--card); }
.quote-history-item b { color: var(--card-foreground); font-weight: 700; }
.quote-modal-content { width: min(580px, calc(100vw - 32px)); }
#quote-form { display: grid; gap: 14px; margin-top: 18px; }
#quote-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
#quote-form input,
#quote-form select,
#quote-form textarea { width: 100%; box-sizing: border-box; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; }
#quote-form textarea { resize: vertical; min-height: 78px; }
#quote-form input:focus,
#quote-form select:focus,
#quote-form textarea:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }
@media (max-width: 780px) { .quote-card-actions { flex-direction: column; } }

.report-modal-content { width: min(520px, calc(100vw - 32px)); }
#report-form,
.delivery-upload-form { display: grid; gap: 14px; margin-top: 4px; }
#report-form label,
.delivery-upload-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
#report-form textarea,
.delivery-upload-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; resize: vertical; }
#report-form textarea:focus,
.delivery-upload-form textarea:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }
.delivery-upload-form .upload-drop { margin: 0; }
.upload-drop.is-dragover { border-style: solid; border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--secondary)); }
.upload-drop.is-dragover span { transform: scale(1.1); }
.delivery-upload-form select { width: 100%; box-sizing: border-box; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; }
.delivery-upload-form select:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }

.moderation-report-list { display: grid; gap: 12px; margin-top: 18px; }
.moderation-report-card { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
.moderation-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.moderation-report-head time { color: var(--muted-foreground); font-size: 11px; }
.moderation-report-card p { margin: 0; color: var(--card-foreground); font-size: 13px; line-height: 1.5; }
.moderation-report-card small { display: block; color: var(--muted-foreground); font-size: 11px; }
.moderation-note { color: var(--primary); font-weight: 700; }

/* Découvrir : le swipe plein écran façon story reste réservé au téléphone.
   Sur tablette et ordinateur, la page passe à une grille de cartes façon
   marketplace (VGen, Fiverr Pro, etc.) : plus facile à parcourir et à comparer
   qu'un défilement vertical un post à la fois. */
@media (min-width: 781px) {
  #feed.view { max-width: none; }
  .feed-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
  .feed-scroller {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: start;
    gap: 18px;
    height: auto;
    max-height: none;
    overflow: visible;
    scroll-snap-type: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    outline: 0;
  }
  #live-feed { display: contents; }
  .feed-post, .feature-post {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border);
    border-radius: 14px;
    scroll-snap-align: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .feed-post:hover, .feed-post:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md-ui);
    border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
  }
  .feed-post .next-art, .feed-post .scroll-cue { display: none; }
  .feed-post .post-overlay { left: 12px; right: 12px; }
  .feed-post .post-overlay.top { top: 12px; }
  .feed-post .post-overlay.bottom { right: 56px; bottom: 12px; gap: 6px; }
  .feed-post .post-caption strong { font-size: 15px; line-height: 1.1; }
  .feed-post .post-caption span { display: none; }
  .feed-post .artist-chip .avatar { width: 28px; height: 28px; }
  .feed-post .artist-chip b { font-size: 12px; }
  .feed-post .artist-chip small { font-size: 10px; }
  .feed-post .post-actions { right: 12px; bottom: 12px; flex-direction: column; gap: 6px; }
  .feed-post .post-actions .post-action { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .feed-post .post-actions .post-action b { display: none; }
  .feed-post .ghost-icon { width: 30px; height: 30px; }
}
.moderation-audit-log { display: grid; gap: 6px; margin: 18px 0 28px; }

/* Photo de profil : le rond coloré à l'initiale devient un vrai cadre photo
   dès qu'un avatar_url existe, partout où .avatar apparaît. */
.avatar { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.avatar-drop {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 0;
  margin-top: 0;
  padding: 12px;
  text-align: left;
}
.avatar-drop .avatar-drop-preview {
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  font-size: 22px;
  color: white;
  background: var(--primary);
}
.avatar-drop b { color: var(--card-foreground); font-size: 12px; }
.avatar-drop small { display: block; color: var(--muted-foreground); font-size: 10px; font-weight: 400; line-height: 1.4; }