/* ============================================================
   MOSALEA — feuille de style consolidée
   Fusion de 6 fichiers historiques (styles.css, fixes.css,
   user-palette.css, visual-polish.css, gallery-direction.css,
   brand-system.css) en un seul, dans le même ordre exact que
   les <link> d'origine — le rendu final est donc identique,
   seule la structure des fichiers change (1 requête HTTP au
   lieu de 6, une seule source à maintenir).
   ============================================================ */

/* --- 1/6 : styles.css (base) --- */
:root {
  --ink: #272237;
  --muted: #7d778d;
  --line: #e8e4ed;
  --paper: #fbfafc;
  --lilac: #7762df;
  --lilac-dark: #5845c3;
  --lavender: #eeeafd;
  --peach: #ffdcca;
  --mint: #ddf2e9;
  --sidebar: #f5f1f8;
  --shadow: 0 18px 50px rgba(51, 40, 85, .10);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100%; margin: 0; color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 15px; background: var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(119, 98, 223, .32); outline-offset: 2px; }
/* Filet de sécurité thème sombre/clair : certains <select> ajoutés au fil des sessions
   (#commission-preferences-form, .brief-field, le sélecteur de collection de l'œuvre)
   n'ont jamais reçu de règle de couleur dédiée et retombaient sur l'apparence par défaut
   du navigateur — boîte blanche, texte noir, au milieu d'une interface sombre. Cette
   règle de base ne touche que l'élément <select> tout seul (pas input/textarea, qui sont
   déjà stylés partout ailleurs par des règles de classe plus spécifiques que renverser
   ici aurait pu casser, ex. .message-search input, .chat-compose input, .big-search
   input, volontairement transparents/sans bordure). Toute règle plus spécifique
   (#offer-form select, .admin-filters-row select, etc.) continue de l'emporter. */
body.dark { color-scheme: dark; }
body:not(.dark) { color-scheme: light; }
select { border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; width: 252px; padding: 33px 18px 23px; background: var(--sidebar); border-right: 1px solid rgba(80, 58, 105, .05); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 9px; padding-left: 10px; color: var(--ink); font-family: "Fraunces", Georgia, serif; font-size: 27px; font-weight: 700; letter-spacing: -1.5px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--lilac); border-radius: 10px 12px 10px 4px; font-family: "Fraunces", serif; font-size: 19px; transform: rotate(-6deg); }
.main-nav { display: grid; gap: 7px; margin-top: 57px; }
.nav-link { width: 100%; min-height: 47px; padding: 0 13px; display: flex; align-items: center; gap: 15px; border: 0; border-radius: 13px; color: #5d576d; background: transparent; font-size: 15px; font-weight: 600; text-align: left; transition: .18s ease; }
.nav-link > span { width: 18px; color: #696178; font-family: "DM Mono", monospace; font-size: 22px; font-weight: 400; text-align: center; }
.nav-link b { margin-left: auto; padding: 2px 7px; color: white; background: #ed6e89; border-radius: 99px; font-size: 11px; }
.nav-link:hover { background: rgba(255,255,255,.65); color: var(--lilac-dark); }
.nav-link.active { color: var(--lilac-dark); background: #e8e1ff; }
.nav-link.active > span { color: var(--lilac); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 18px; }
.create-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 47px; border: 0; border-radius: 13px; color: white; background: var(--lilac); box-shadow: 0 8px 18px rgba(100, 78, 198, .22); font-weight: 700; transition: .18s ease; }
.create-button:hover, .primary-button:hover { background: var(--lilac-dark); transform: translateY(-1px); }
.create-button span { font-size: 20px; font-weight: 400; }
.profile-pill { display: flex; align-items: center; gap: 9px; padding: 7px; width: 100%; border: 0; border-radius: 13px; background: rgba(255,255,255,.6); text-align: left; }
.profile-pill strong, .profile-pill small { display: block; }
.profile-pill strong { font-size: 13px; }
.profile-pill small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.profile-pill i { margin-left: auto; color: var(--muted); font-style: normal; }
.account-menu { position: fixed; z-index: 25; left: 18px; bottom: 96px; width: 238px; padding: 7px; border: 1px solid var(--border, #ddd8e4); border-radius: 13px; background: var(--card, white); box-shadow: 0 18px 46px rgba(26,16,47,.18); }
.account-menu[hidden] { display: none; }
.account-menu-email { margin: 5px 9px 6px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 9px; border: 0; border-radius: 8px; color: var(--foreground, var(--ink)); background: transparent; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; }
/* Sans ce garde-fou, #account-menu-resources (masqué par JS pour les visiteurs non
   connectés / non-artistes via .hidden) restait affiché en permanence dans le menu
   compte : le display:flex ci-dessus écrase le display:none natif de [hidden]. */
.account-menu-item[hidden] { display: none; }
.account-menu-icon { flex: 0 0 auto; color: var(--muted, var(--ink)); }
.account-menu-danger .account-menu-icon { color: inherit; }
.account-menu-item:hover { background: var(--secondary, #f4f1f7); }
.account-menu-divider { margin: 6px 5px; border: 0; border-top: 1px solid var(--border, var(--line)); }
.account-menu-danger { color: #c0435a; }
.account-menu-danger:hover { background: #fbeaee; }
/* #c0435a passe la norme AA (4.5:1) sur fond clair (--card ~ blanc) mais tombe à 3.06:1
   sur fond sombre (--card ~ #17272f) : trop bas pour du texte normal. Nuance plus claire
   dédiée au thème sombre (contraste ~4.7:1), sans toucher au rouge de remplissage (déjà
   ~5:1 en blanc sur fond plein). */
body.dark .account-menu-danger { color: #e0677f; }
@media (max-width: 780px) { .account-menu { left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; } }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; color: white; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 2px 6px rgba(48,32,83,.15); font-family: "Fraunces", serif; font-size: 16px; font-weight: 700; }
.avatar-me { background: linear-gradient(145deg, #f09aa0, #c25e92); }
.avatar-lune { background: linear-gradient(145deg, #252c58, #ec8ead 63%, #f3cd79); }
.avatar-iyo { background: linear-gradient(145deg, #d473d7, #5c4ba3 65%, #fea66e); }
.avatar-mika { background: linear-gradient(145deg, #90c7e5, #4c73b2 64%, #e9e7b5); }

main { width: calc(100% - 252px); margin-left: 252px; min-width: 0; }
.view { display: none; max-width: 1330px; min-height: 100vh; margin: 0 auto; padding: 34px 52px 54px; animation: appear .28s ease; }
.view.active { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.topbar, .page-header, .messages-header { display: flex; justify-content: space-between; align-items: center; }
.eyebrow { margin: 0 0 7px; color: var(--lilac); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(30px, 3vw, 41px); line-height: 1.05; letter-spacing: -1.6px; }
h1 > span { color: #f4b048; font-size: .8em; }
.top-actions { display: flex; gap: 10px; }
.round-button { display: grid; position: relative; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: #59516c; background: white; font-size: 18px; transition: .18s ease; }
.round-button:hover { border-color: #bfb5de; color: var(--lilac); transform: translateY(-1px); }
.notification i { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; background: #ef6b87; border: 1px solid white; border-radius: 50%; }

/* Bannière du défi communautaire actif, en haut de la page d'accueil : demandée
   par un artiste testeur pour donner davantage envie de participer qu'une petite
   carte de côté. Dégradé lilas par défaut ; remplacé par l'image de fond du défi
   (banner_path) quand l'admin en a fourni une, avec un voile sombre pour garder
   le texte lisible par-dessus n'importe quelle image. */
.challenge-home-banner { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 256px; max-height: 256px; margin-top: 22px; padding: 34px 32px; border-radius: 18px; background: linear-gradient(135deg, var(--lilac), #a190f0); background-size: cover; background-position: center; isolation: isolate; transition: min-height .25s ease, max-height .25s ease, opacity .2s ease, margin-top .25s ease, padding .25s ease; }
.challenge-home-banner.has-image { background-color: #2a1f4d; }
/* États chargement/absence de défi (CLS) : par défaut la bannière occupe déjà sa
   hauteur finale (min/max-height fixes ci-dessus) avec un shimmer, comme le
   skeleton du feed — voir updateChallengeHomeBanner(). Si un défi existe, on ne
   fait que révéler le fond/contenu, sans changer la hauteur : aucun décalage.
   Si aucun défi n'existe, on réduit la hauteur à 0 en douceur (is-empty) : un
   seul décalage possible, animé et bien plus rare que l'apparition, plutôt que
   le décalage brutal et systématique d'avant (section entière insérée après le
   premier rendu, coupable du score CLS observé sur le rapport Cloudflare). */
.challenge-home-banner.is-loading { background: #183845; background-image: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .03) 70%); background-size: 200% 100%; animation: feed-skeleton-shimmer 1.5s ease-in-out infinite; }
.challenge-home-banner.is-loading .challenge-home-banner-content, .challenge-home-banner.is-loading .challenge-home-banner-overlay { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .challenge-home-banner.is-loading { animation: none; } }
.challenge-home-banner.is-empty { min-height: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.challenge-home-banner-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20,12,40,.15), rgba(20,12,40,.72)); transition: opacity .2s ease; }
.challenge-home-banner.has-image .challenge-home-banner-overlay { background: linear-gradient(180deg, rgba(18,10,38,.35), rgba(18,10,38,.82)); }
.challenge-home-banner-content { position: relative; z-index: 1; max-width: 560px; transition: opacity .2s ease; }
.challenge-home-banner-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.challenge-home-banner-content h2 { margin: 0 0 10px; color: #fff; font-family: "Fraunces", serif; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.challenge-home-banner-content p { margin: 0 0 20px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.challenge-home-banner-content .primary-button { background: #fff; color: var(--lilac); }
.challenge-home-banner-content .primary-button:hover { background: rgba(255,255,255,.9); }

/* Catégories du feed : rangée qui s'étend sur une seconde ligne (flex-wrap)
   plutôt qu'une hauteur fixe à une seule ligne, pour accueillir les catégories
   supplémentaires révélées par le bouton "+" directement en ligne. L'espacement
   passe par margin-right sur chaque onglet plutôt que gap sur le conteneur :
   .feed-more-menu dissout ses enfants dans la rangée via display:contents (voir
   plus bas), et certains navigateurs n'appliquent pas correctement le gap flex
   à des enfants "dissous" de cette façon — un margin par élément est fiable
   dans tous les cas (constat du 23 août 2026 : rangée collée sans lui). */
.feed-switch { display: flex; flex-wrap: wrap; align-items: center; margin-top: 24px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.feed-tab { height: 34px; margin: 0 24px 12px 0; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 14px; font-weight: 600; white-space: nowrap; }
.feed-tab.active { color: var(--ink); border-bottom-color: var(--lilac); }
/* Bouton "+" pour révéler des catégories supplémentaires : elles apparaissent
   directement dans la rangée (comme les onglets déjà visibles, voir image de
   référence du 23 août 2026), pas dans un menu déroulant flottant séparé —
   plus simple à repérer que l'ancien panneau qui masquait la sélection. */
.feed-more { position: relative; height: 34px; margin: 0 0 12px; display: flex; align-items: center; }
.feed-more-button { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: .15s ease; }
.feed-tags-popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 300px; max-width: calc(100vw - 40px); max-height: 320px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 18px 46px rgba(26,16,47,.18); }
.feed-tags-popover[hidden] { display: none; }
.feed-tags-popover-title { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.feed-tags-popover-list { display: flex; flex-wrap: wrap; gap: 6px; }
.feed-more-tags-empty { margin: 0; color: var(--muted); font-size: 12px; }
.feed-tag-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; transition: .15s ease; }
.feed-tag-chip:hover { border-color: var(--lilac); color: var(--lilac-dark); }
.feed-tag-chip.is-top { border-color: var(--lilac); color: var(--lilac-dark); background: color-mix(in oklch, var(--lilac) 12%, var(--card)); font-weight: 700; }
.feed-more-button:hover, .feed-more-button[aria-expanded="true"] { border-color: var(--lilac); color: var(--lilac); }
/* display:contents "dissout" ce conteneur : ses .feed-tab deviennent des
   enfants directs de .feed-switch et héritent donc du même style flat que les
   onglets toujours visibles, sans encart ni fond séparé. */
.feed-more-menu { display: contents; }
.feed-more-menu[hidden] { display: none; }
.feed-status { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #5b8673; font-size: 12px; font-weight: 600; }
.feed-status i { width: 8px; height: 8px; background: #79c1a3; border-radius: 50%; }
.feed-layout { display: grid; grid-template-columns: minmax(480px, 1.26fr) minmax(260px, .74fr); gap: 27px; padding-top: 30px; }
.feed-scroller { height: 620px; overflow-y: auto; overscroll-behavior-y: contain; border-radius: 23px; box-shadow: var(--shadow); scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-width: none; background: #402c59; }
.feed-scroller::-webkit-scrollbar { display: none; }
.feed-post { position: relative; height: 620px; min-height: 620px; overflow: hidden; background: #402c59; scroll-snap-align: start; scroll-snap-stop: always; }
.post-visual { position: absolute; inset: 0; overflow: hidden; transition: .4s ease; }
.art-aurora { background: radial-gradient(circle at 82% 16%, #f6b3d3 0 4%, transparent 4.4%), radial-gradient(circle at 18% 82%, #7d67bc 0 13%, transparent 13.4%), radial-gradient(ellipse at 52% 65%, #ff7fb4 0 14%, transparent 14.4%), linear-gradient(142deg, #1e2d5b 0%, #5d4086 43%, #e68cb1 100%); }
.art-aurora:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 23px, rgba(255,255,255,.07) 24px 25px, transparent 26px 50px); mix-blend-mode: screen; }
.spark { position: absolute; width: 12px; height: 12px; background: #ffe9ae; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.spark-one { top: 20%; left: 22%; transform: scale(1.6); }.spark-two { top: 41%; left: 75%; }.spark-three { top: 75%; left: 16%; transform: scale(.5); }
.moon { position: absolute; top: 10%; right: 11%; width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.06), 0 0 0 39px rgba(255,255,255,.04); }
.portrait-shape { position: absolute; left: 34%; bottom: -8%; width: 36%; height: 75%; background: linear-gradient(110deg, #edc0d2, #c373a1 55%, #683e78); border-radius: 52% 51% 28% 39% / 46% 39% 42% 53%; box-shadow: -37px 38px 0 -11px #2f3165, 60px 70px 0 -10px #f6c5a5; transform: rotate(-7deg); }
.portrait-shape:after { content: ""; position: absolute; top: 31%; left: 19%; width: 28%; height: 7%; background: #5a315f; border-radius: 50%; box-shadow: 69px 14px 0 -1px #5a315f, 31px 64px 0 -4px #bd5c8f; }
.ribbon { position: absolute; width: 70%; height: 14%; bottom: 18%; left: -12%; border-top: 25px solid #e686c1; border-radius: 50%; transform: rotate(18deg); opacity: .68; }
.visual-stamp { position: absolute; right: 26px; bottom: 23px; color: rgba(255,255,255,.75); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; transform: rotate(-8deg); }
.post-overlay { position: absolute; display: flex; left: 23px; right: 23px; z-index: 1; }
.post-overlay.top { top: 22px; justify-content: space-between; align-items: center; }
.post-overlay.bottom { bottom: 22px; flex-direction: column; align-items: flex-start; gap: 13px; }
.content-label { padding: 7px 10px; color: white; background: rgba(24,17,48,.24); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; backdrop-filter: blur(9px); font-size: 11px; font-weight: 600; }
.ghost-icon { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: rgba(24,17,48,.2); backdrop-filter: blur(9px); font-weight: 700; }
.artist-chip { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; color: white; background: transparent; text-align: left; }
.artist-chip .avatar { width: 38px; height: 38px; }
.artist-chip b, .artist-chip small { display: block; }.artist-chip b { font-size: 13px; }.artist-chip small { margin-top: 1px; color: rgba(255,255,255,.76); font-size: 11px; }
.post-caption { color: white; text-shadow: 0 1px 10px rgba(22,10,37,.32); }.post-caption strong, .post-caption span { display: block; }.post-caption strong { font-family: "Fraunces", serif; font-size: 21px; line-height: 1.1; }.post-caption span { margin-top: 5px; color: rgba(255,255,255,.8); font-size: 12px; }
.post-actions { position: absolute; z-index: 2; right: 23px; bottom: 23px; display: flex; gap: 8px; }
.post-action { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.27); border-radius: 20px; color: white; background: rgba(29,15,49,.25); backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; }.post-action > span { font-size: 17px; line-height: 1; }.post-action.liked { color: #ffcfdb; background: rgba(146,40,72,.36); }.post-action.saved { color: #ffebb6; }
.next-art { position: absolute; z-index: 2; left: 50%; bottom: 23px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; background: rgba(29,15,49,.2); transform: translateX(-50%); }
.scroll-cue { position: absolute; z-index: 2; top: 53px; right: 24px; color: rgba(255,255,255,.84); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }.scroll-cue i { display: inline-block; margin-left: 3px; font-style: normal; font-size: 15px; animation: bounce 1.7s infinite; }@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }.gallery-sun { position: absolute; top: 14%; right: 15%; width: 100px; height: 100px; border: 3px solid rgba(255,237,180,.58); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.08); }.gallery-flower { position: absolute; width: 43px; height: 43px; background: #ffdaa6; clip-path: polygon(50% 0, 61% 31%, 90% 10%, 70% 40%, 100% 50%, 70% 60%, 90% 90%, 61% 69%, 50% 100%, 39% 69%, 10% 90%, 30% 60%, 0 50%, 30% 40%, 10% 10%, 39% 31%); }.gallery-flower.one { left: 14%; top: 18%; }.gallery-flower.two { right: 11%; bottom: 18%; transform: scale(.7); }.gallery-moon { position: absolute; top: 14%; right: 15%; width: 100px; height: 100px; border-radius: 50%; background: #ddd5ff; box-shadow: inset -22px -6px #8793cb, 0 0 0 17px rgba(255,255,255,.07); }.gallery-star { position: absolute; width: 13px; height: 13px; background: #fff2bf; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }.gallery-star.s1 { top: 26%; left: 19%; }.gallery-star.s2 { top: 46%; right: 25%; transform: scale(.63); }.gallery-star.s3 { bottom: 21%; left: 28%; transform: scale(1.4); }
.feed-aside { display: grid; align-content: start; gap: 17px; }
.mini-card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.mini-card-title { display: flex; align-items: center; gap: 7px; color: #625b72; font-size: 11px; font-weight: 700; }.mini-icon { display: grid; place-items: center; width: 21px; height: 21px; color: var(--lilac); background: #eeeafd; border-radius: 7px; }
.match-card { background: linear-gradient(141deg, #f6f2ff, #fff 74%); }.match-card h2 { margin: 16px 0 6px; font-family: "Fraunces", serif; font-size: 25px; letter-spacing: -1px; }.match-card p { margin-bottom: 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }.tag-row button, .profile-tags span { padding: 5px 8px; border: 0; border-radius: 6px; color: #6451ac; background: #e9e4fb; font-size: 11px; font-weight: 600; }
/* Suggestions de # (voir attachHashtagAutocomplete) : menu flottant construit en JS
   et positionné en position: fixed sous le champ actif, sur le même modèle que
   .account-menu (seul autre petit menu flottant du site). */
/* Champ Tags dédié (Publier + Modifier l'œuvre) : remplace l'ancien système de
   "# tapés dans la description" par des pastilles retirables + suggestions
   cliquables, sur le modèle DeviantArt (constat utilisateur : les # noyés
   dans un texte libre étaient peu visibles et faciles à oublier). */
.publish-modal-content .tag-field { margin: 19px 0; }
.publish-modal-content .tag-field label { margin: 0; }
.tag-input-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); cursor: text; }
.tag-input-box input { flex: 1 1 90px; min-width: 90px; border: 0; outline: 0; padding: 3px 2px; color: var(--ink); background: transparent; font: inherit; font-size: 12px; }
.tag-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 5px 4px 10px; border-radius: 999px; color: var(--lilac-dark); background: color-mix(in oklch, var(--lilac) 16%, var(--card)); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag-pill button { display: grid; place-items: center; width: 16px; height: 16px; border: 0; border-radius: 50%; color: inherit; background: transparent; font-size: 13px; line-height: 1; cursor: pointer; }
.tag-pill button:hover { background: color-mix(in oklch, var(--lilac) 30%, transparent); }
.tag-suggestions { margin-top: 9px; }
.tag-suggestions > small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 500; }
.tag-suggestions-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-suggestion-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; transition: .15s ease; }
.tag-suggestion-chip:hover { border-color: var(--lilac); color: var(--lilac-dark); }
.tag-suggestion-chip span { margin-left: 2px; color: var(--lilac); font-weight: 800; }
.text-button { margin-top: 20px; padding: 0; border: 0; color: var(--lilac-dark); background: transparent; font-size: 12px; font-weight: 700; }.text-button span { margin-left: 3px; font-size: 16px; }
.artist-of-day { overflow: hidden; }.daily-artist { display: flex; align-items: center; width: 100%; margin: 16px 0 16px; padding: 0; border: 0; background: transparent; text-align: left; }.daily-artist > span:nth-child(2) { margin-left: 9px; }.daily-artist b, .daily-artist small { display: block; }.daily-artist b { font-size: 13px; }.daily-artist small { margin-top: 3px; color: var(--muted); font-size: 11px; }.daily-artist > i { margin-left: auto; color: var(--lilac); font-style: normal; font-size: 20px; }
.mini-art { position: relative; height: 79px; overflow: hidden; border-radius: 12px; }.art-lilac { background: radial-gradient(circle at 70% 34%, #ffe4c2 0 7%, transparent 7.5%), radial-gradient(circle at 30% 76%, #7b64a9 0 13%, transparent 13.5%), linear-gradient(135deg, #a889cd, #e7a0c2 58%, #f0c496); }.art-lilac span:first-child { position: absolute; left: 31%; bottom: -15%; width: 20%; height: 72%; background: #e9b4b0; border-radius: 50% 50% 30% 30%; }.art-lilac span:last-child { position: absolute; left: 27%; bottom: 23%; width: 31%; height: 40%; background: #343059; border-radius: 55% 46% 50% 50%; }.safety-card { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-color: #d7eee3; background: #f3faf6; }.shield { display: grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; color: #4b9b77; border-radius: 10px; background: #d9f0e5; font-weight: 700; }.safety-card b { color: #4c6d5e; font-size: 11px; }.safety-card p { margin: 2px 0 0; color: #6d887c; font-size: 10px; line-height: 1.3; }.safety-card button { margin-left: auto; border: 0; color: #4b9b77; background: transparent; font-size: 17px; }

.search-hero { padding: 16px 0 37px; text-align: center; }.search-hero h1 { margin-bottom: 25px; }.big-search { display: flex; align-items: center; max-width: 714px; height: 58px; margin: 0 auto; padding-left: 19px; border: 1px solid #cfc7da; border-radius: 15px; background: white; box-shadow: 0 7px 18px rgba(48,35,80,.05); }.big-search > span { color: #70677d; font-size: 23px; }.big-search input { min-width: 0; flex: 1; height: 100%; padding: 0 14px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; }.big-search button { height: 42px; margin-right: 8px; padding: 0 17px; border: 0; border-radius: 10px; color: white; background: var(--lilac); font-size: 13px; font-weight: 700; }.popular-searches { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 11px; }.popular-searches button { padding: 0; border: 0; color: #6451ac; background: transparent; text-decoration: underline; text-underline-offset: 2px; }
.search-content { display: grid; grid-template-columns: 228px minmax(0,1fr); gap: 43px; }.filters { align-self: start; padding: 3px 0; }.filter-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }.filter-heading h2 { margin: 0; font-size: 16px; }.filter-heading button { padding: 0; border: 0; color: var(--lilac); background: transparent; font-size: 11px; font-weight: 600; }details { padding: 16px 0; border-bottom: 1px solid var(--line); }summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }summary::-webkit-details-marker { display: none; }summary span { color: var(--muted); }.range-values { display: flex; justify-content: space-between; margin: 15px 0 7px; color: var(--muted); font-size: 11px; }.price-range { width: 100%; accent-color: var(--lilac); }.check, .radio { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #595366; font-size: 12px; cursor: pointer; }.check input, .radio input { position: absolute; opacity: 0; }.check > span { width: 15px; height: 15px; border: 1px solid #bcb4c7; border-radius: 4px; background: white; }.check input:checked + span { border-color: var(--lilac); background: var(--lilac); box-shadow: inset 0 0 0 3px white; }.check em { margin-left: auto; color: #a19aa9; font-size: 10px; font-style: normal; }.radio > span { width: 15px; height: 15px; border: 1px solid #bcb4c7; border-radius: 50%; background: white; }.radio input:checked + span { border: 4px solid var(--lilac); }.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.filter-chips button { padding: 6px 8px; border: 1px solid #dfd9e6; border-radius: 7px; color: #696175; background: white; font-size: 11px; }.filter-chips button.selected { border-color: #c9bdf3; color: #614db0; background: #eeeafd; }
.results-top { display: flex; align-items: center; justify-content: space-between; min-height: 38px; margin-bottom: 19px; }.results-top p { margin: 0; color: #696375; font-size: 13px; }.results-top strong { color: var(--ink); }.results-top b { color: var(--ink); }.sort-select { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }.sort-select select { border: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; outline: 0; }.artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }.artist-result { overflow: hidden; border-radius: 15px; background: white; box-shadow: 0 4px 16px rgba(46,35,72,.05); transition: .18s ease; }.artist-result:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(46,35,72,.10); }.result-art { position: relative; height: 180px; overflow: hidden; }.result-art:after { content: ""; position: absolute; inset: auto 13px 10px auto; width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; }.art-poppy { background: radial-gradient(circle at 24% 22%, #ffdcac 0 5%, transparent 5.4%), radial-gradient(circle at 74% 67%, #df5483 0 16%, transparent 16.3%), linear-gradient(140deg, #f4a172, #e96f90 55%, #7354a1); }.art-poppy:before { content: ""; position: absolute; left: 35%; top: 18%; width: 31%; height: 75%; background: #684069; border-radius: 50% 50% 39% 39%; box-shadow: 11px 32px 0 -4px #f7c3ab; }.art-bluebell { background: radial-gradient(circle at 70% 20%, #e1d1ff 0 7%, transparent 7.4%), linear-gradient(146deg, #3e4a8d, #74a6dc 51%, #e7cee7); }.art-bluebell:before { content: ""; position: absolute; right: 24%; bottom: -5%; width: 34%; height: 78%; background: #f0c3bd; border-radius: 51% 51% 30% 30%; box-shadow: -25px 5px 0 -2px #3c416f; }.art-garden { background: radial-gradient(circle at 19% 19%, #ffe7a7 0 5%, transparent 5.4%), radial-gradient(circle at 77% 25%, #dd8fb7 0 7%, transparent 7.4%), linear-gradient(135deg, #44656a, #77aa91 58%, #efcf9d); }.art-garden:before { content: ""; position: absolute; left: 37%; bottom: -12%; width: 27%; height: 82%; background: #f4c0a6; border-radius: 52% 52% 35% 35%; box-shadow: -33px 15px 0 -7px #2e5650; }.art-sunset { background: radial-gradient(circle at 72% 30%, #ffd493 0 10%, transparent 10.3%), linear-gradient(160deg, #6a467f, #e27b83 58%, #f3c986); }.art-sunset:before { content: ""; position: absolute; left: 28%; bottom: -10%; width: 40%; height: 78%; background: #7d3f61; border-radius: 54% 54% 35% 35%; }.result-info { padding: 12px 13px 14px; }.result-artist { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }.result-artist .avatar { width: 27px; height: 27px; font-size: 12px; }.result-artist b { font-size: 12px; }.result-artist small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }.result-info h3 { margin: 0 0 7px; font-family: "Fraunces", serif; font-size: 17px; letter-spacing: -.5px; }.result-meta { display: flex; justify-content: space-between; align-items: center; color: #777084; font-size: 10px; }.availability { color: #4c9b76; font-weight: 700; }.result-price { color: var(--ink); font-weight: 700; }.result-tags { display: flex; gap: 5px; margin-top: 11px; }.result-tags span { padding: 4px 6px; color: #746a89; background: #f4f1f7; border-radius: 5px; font-size: 9px; }

.back-link { margin-bottom: 18px; padding: 0; border: 0; color: var(--lilac); background: transparent; font-size: 13px; font-weight: 700; }.artist-cover { position: relative; height: 188px; overflow: hidden; border-radius: 21px; background: linear-gradient(118deg, #6b5186, #f1a9bf 45%, #f4d1a3); }.artist-cover:before, .artist-cover:after { content: ""; position: absolute; border-radius: 50%; }.artist-cover:before { top: -73px; left: 8%; width: 290px; height: 290px; background: rgba(255,255,255,.23); }.artist-cover:after { right: 11%; bottom: -79px; width: 360px; height: 210px; border: 30px solid rgba(98,66,138,.25); }.artist-cover span { position: absolute; width: 20px; height: 20px; background: #fff3c5; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }.artist-cover span:nth-child(1) { top: 34px; right: 34%; }.artist-cover span:nth-child(2) { top: 78px; right: 16%; transform: scale(.55); }.artist-cover span:nth-child(3) { bottom: 31px; left: 41%; transform: scale(.7); }.artist-profile-head { display: flex; align-items: center; gap: 17px; margin: -47px 29px 24px; position: relative; }.profile-avatar { width: 91px; height: 91px; border-width: 5px; font-size: 39px; }.artist-profile-head h1 { font-size: 33px; }.artist-profile-head .eyebrow { margin-bottom: 3px; }.handle { margin: 5px 0 0; color: #777184; font-size: 12px; }.verified { display: inline-grid; place-items: center; width: 18px; height: 18px; color: white; background: #70b6e4; border-radius: 50%; font-family: sans-serif; font-size: 11px; vertical-align: middle; }.badge-pro { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 8px; border-radius: 20px; color: #7a4a00; background: linear-gradient(120deg, #ffd580, #f0a83c); font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.badge-founder { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 8px; border-radius: 20px; color: #fff2fa; background: linear-gradient(120deg, #8a5a9c, #5a3d7a); font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .05em; vertical-align: middle; }
.badge-logo-credit { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 8px; border-radius: 20px; color: var(--primary-foreground); background: linear-gradient(120deg, var(--brand-sky, var(--primary)), var(--primary)); font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .05em; vertical-align: middle; }.badge-elite { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 8px; border-radius: 20px; color: #f5eeff; background: linear-gradient(120deg, #b98aff, #6a3fd6); font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.reliability-badge { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 8px; border-radius: 20px; font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
.reliability-badge[hidden] { display: none; }
.reliability-badge.is-excellente { color: #0a3d24; background: linear-gradient(120deg, #8de3b4, #45b980); }
.reliability-badge.is-solide { color: #123a52; background: linear-gradient(120deg, #a9d7f2, #5fa9d6); }
.reliability-badge.is-nouveau { color: #5a5344; background: #efe6d3; }
#artist-reliability-badge.reliability-badge { margin-left: 8px; }
.result-meta .reliability-badge { margin-left: 0; }.pro-upsell-card, .pro-status-card { border-left: 3px solid #f0a83c; }.elite-upsell-card, .elite-status-card { border-left: 3px solid #6a3fd6; }.pro-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }.pro-card-actions .text-button { margin-top: 0; }.settings-plan-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.settings-plan-actions .text-button { margin-top: 0; }.settings-mfa-enroll, .settings-mfa-codes { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--secondary); }.mfa-qr-wrap { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 10px; }.mfa-qr-wrap svg, .mfa-qr-wrap img { width: 160px; height: 160px; }.mfa-secret-fallback { margin: 0; color: var(--muted-foreground); font-size: 11px; word-break: break-all; }.mfa-recovery-codes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.mfa-recovery-codes-grid code { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 13px; text-align: center; letter-spacing: .04em; }.artist-result-public { position: relative; }.accent-swatch-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; }.accent-swatch { position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch-color, #ccc); box-shadow: 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; }
.accent-swatch.selected { box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 5px var(--primary, #f07758); }
.accent-swatch.selected:after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.accent-swatch-reset { display: grid; place-items: center; color: #877f8f; background: #f1eef4; font-size: 12px; }
.accent-swatch-reset.selected:after { content: none; }#artist-cover-banner.accent-tinted, #creator-cover-banner.accent-tinted { background: linear-gradient(118deg, var(--artist-accent), color-mix(in srgb, var(--artist-accent) 45%, white) 55%, color-mix(in srgb, var(--artist-accent) 18%, white)); }#artist-cover-banner.has-cover-image, #creator-cover-banner.has-cover-image { background-size: cover; background-position: center; }.artist-profile-head [data-action="order-artist"].accent-tinted { background: var(--artist-accent); }.artist-profile-head [data-action="order-artist"].accent-tinted:hover { background: color-mix(in srgb, var(--artist-accent) 78%, black); }.profile-actions { display: flex; gap: 9px; margin-left: auto; }.primary-button, .secondary-button { min-height: 40px; padding: 0 15px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: .18s ease; }.primary-button { border: 0; color: white; background: var(--lilac); }.secondary-button { border: 1px solid #ddd8e4; color: #5d5669; background: white; }.secondary-button:hover { border-color: #b9add5; color: var(--lilac-dark); }.artist-body { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 40px; margin: 0 29px; }.artist-info { color: #6e6779; font-size: 13px; line-height: 1.55; }.artist-info > p { margin-bottom: 20px; }.info-line { display: flex; gap: 8px; margin: 10px 0; color: #645d70; font-size: 11px; }.info-line span { color: var(--lilac); }.profile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 16px; }.artist-info a { color: var(--lilac-dark); font-size: 12px; font-weight: 700; text-decoration: none; }.profile-tabs { display: flex; gap: 25px; height: 40px; border-bottom: 1px solid var(--line); }.profile-tabs button { padding: 0 1px 11px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }.profile-tabs button.active { color: var(--ink); border-color: var(--lilac); }.profile-tabs b { padding: 2px 5px; color: #5f4aaa; background: #eeeafd; border-radius: 6px; font-size: 9px; }.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }.portfolio-card { position: relative; min-height: 170px; overflow: hidden; border-radius: 12px; }.portfolio-card > span { position: absolute; top: 11px; right: 11px; color: rgba(255,255,255,.8); font-size: 17px; }.portfolio-card.small .portrait-shape, .portfolio-card.small .ribbon, .portfolio-card.small .moon, .portfolio-card.small .spark, .portfolio-card.small .visual-stamp { transform: scale(.45); transform-origin: center; }.portfolio-card.small .portrait-shape { bottom: -17%; }.portfolio-card.small .moon { top: -12%; right: -4%; }.portfolio-card.small .ribbon { bottom: -7%; }

.page-header { align-items: flex-end; padding: 11px 0 31px; border-bottom: 1px solid var(--line); }.page-header p:last-child { max-width: 330px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }.order-tabs { display: flex; gap: 23px; height: 63px; }.order-tabs button { padding: 0 1px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 13px; font-weight: 700; }.order-tabs button.active { color: var(--ink); border-color: var(--lilac); }.order-tabs b { padding: 2px 6px; border-radius: 10px; color: #6755af; background: #eeeafd; font-size: 10px; }.order-card { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; }.order-art { flex: 0 0 auto; width: 114px; height: 114px; border-radius: 12px; }.order-info { min-width: 0; flex: 1; }.status { display: inline-block; margin-bottom: 7px; padding: 4px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; }.status.progress { color: #5b4bac; background: #eeeafd; }.status.pending { color: #b87644; background: #fff0db; }.order-info h2 { margin: 0 0 5px; font-family: "Fraunces", serif; font-size: 21px; letter-spacing: -.8px; }.order-info p { margin: 0; color: var(--muted); font-size: 12px; }.progress-track { height: 5px; margin: 17px 0 8px; overflow: hidden; background: #eeeaf2; border-radius: 10px; }.progress-track span { display: block; width: 59%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8170df, #b49aee); }.progress-steps { display: flex; justify-content: space-between; color: #aaa3b0; font-size: 10px; }.progress-steps .done, .progress-steps .current { color: #6252ad; }.progress-steps .current { font-weight: 700; }.order-side { display: grid; justify-items: end; gap: 5px; min-width: 150px; }.order-side span { color: var(--muted); font-size: 10px; }.order-side > b { font-size: 13px; }.order-side .secondary-button { margin-top: 13px; }.compact .order-art { width: 75px; height: 75px; }.compact { margin-top: 14px; }

.messages-header { padding: 0 0 21px; }.messages-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); height: calc(100vh - 146px); min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }.conversation-list { padding: 14px 10px; border-right: 1px solid var(--line); }.message-search { display: flex; align-items: center; gap: 7px; height: 35px; padding: 0 10px; border-radius: 9px; color: #8e8797; background: #f5f3f7; }.message-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }.conversation { display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px 9px; border: 0; border-radius: 10px; background: transparent; text-align: left; }.conversation:hover { background: #f8f7fa; }.conversation.active { background: #eeeafd; }.conversation b, .conversation small { display: block; }.conversation b { font-size: 12px; }.conversation small { max-width: 145px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.conversation time { align-self: flex-start; margin-left: auto; color: #9891a0; font-size: 9px; }.chat-panel { display: flex; flex-direction: column; min-width: 0; }.chat-head { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line); }.chat-head b, .chat-head small { display: block; }.chat-head b { font-size: 13px; }.chat-head small { margin-top: 3px; color: #7d778d; font-size: 10px; }.chat-head small i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; background: #6fc29a; border-radius: 50%; }.chat-head button { margin-left: auto; border: 0; color: var(--muted); background: transparent; font-weight: 700; }.order-context { display: flex; align-items: center; gap: 9px; margin: 14px 18px 0; padding: 8px; border-radius: 10px; background: #f6f3fb; }.order-context .mini-art { width: 41px; height: 41px; }.order-context small, .order-context b, .order-context em { display: block; }.order-context small { margin-bottom: 3px; color: #7360bd; font-family: "DM Mono", monospace; font-size: 8px; }.order-context b { font-size: 11px; }.order-context em { margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }.order-context button { margin-left: auto; border: 0; color: var(--lilac-dark); background: transparent; font-size: 10px; font-weight: 700; }.chat-log { flex: 1; padding: 24px 21px; overflow: auto; }.chat-date { margin: 0 0 17px; color: #a09aa8; font-size: 10px; text-align: center; }.bubble { max-width: 54%; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; color: #514a5b; background: #f4f1f7; font-size: 12px; line-height: 1.4; }.bubble.mine { margin-left: auto; border-radius: 12px 12px 3px 12px; color: white; background: var(--lilac); }.bubble time { display: block; margin-top: 4px; color: #a19aa9; font-size: 8px; text-align: right; }.bubble.mine time { color: #d9d2ff; }.chat-compose { display: flex; align-items: center; gap: 9px; padding: 13px 17px; border-top: 1px solid var(--line); }.chat-compose button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: #7f788a; background: #f3f0f6; font-size: 17px; }.chat-compose input { flex: 1; height: 32px; border: 0; outline: 0; color: var(--ink); font-size: 12px; }.chat-compose .send-button { color: white; background: var(--lilac); }

.collection-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 26px; }.collection { position: relative; min-height: 230px; padding: 20px; overflow: hidden; border-radius: 16px; color: white; box-shadow: var(--shadow); }.collection:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24,14,43,.55), transparent 64%); }.collection h2, .collection > span { position: relative; z-index: 1; }.collection > span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; background: rgba(32,21,49,.15); font-size: 10px; }.collection h2 { position: absolute; right: 20px; bottom: 16px; left: 20px; margin: 0; font-family: "Fraunces", serif; font-size: 24px; line-height: 1; }.creator-dash { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 15px; margin-top: 28px; }.creator-dash > section { min-height: 170px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }.creator-dash h2 { margin: 11px 0 2px; font-family: "Fraunces", serif; font-size: 24px; }.creator-dash p { color: var(--muted); font-size: 12px; }.creator-dash .secondary-button { margin-top: 6px; }.avatar.large { width: 50px; height: 50px; font-size: 22px; }.dash-stat { display: flex; flex-direction: column; justify-content: flex-end; }.dash-stat b { color: var(--lilac-dark); font-family: "Fraunces", serif; font-size: 37px; letter-spacing: -1px; }.dash-stat span { margin-top: 4px; color: var(--muted); font-size: 11px; }

.modal-backdrop { display: none; position: fixed; z-index: 20; inset: 0; place-items: center; padding: 20px; background: rgba(32,24,49,.52); backdrop-filter: blur(5px); }.modal-backdrop.open { display: grid; }.modal { position: relative; width: min(100%, 550px); max-height: calc(100vh - 40px); overflow: auto; padding: 32px; border-radius: 22px; background: white; box-shadow: 0 22px 80px rgba(26,16,47,.32); animation: modalIn .2s ease; }.modal h2 { margin-bottom: 7px; font-family: "Fraunces", serif; font-size: 30px; letter-spacing: -1px; }.modal-close { position: absolute; top: 15px; right: 17px; width: 31px; height: 31px; border: 0; border-radius: 50%; color: #6b6476; background: #f3f0f6; font-size: 22px; line-height: 1; }.modal-avatar { width: 47px; height: 47px; margin-bottom: 17px; font-size: 20px; }.modal-intro { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.45; }.commission-options { display: grid; gap: 9px; margin-bottom: 20px; }.commission-options[hidden] { display: none; }.commission-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 1px solid #e3dfea; border-radius: 12px; background: white; text-align: left; }.commission-option.selected { border-color: var(--lilac); box-shadow: inset 0 0 0 1px var(--lilac); }.option-art { width: 45px; height: 45px; overflow: hidden; border-radius: 8px; }.commission-option b, .commission-option small { display: block; }.commission-option b { font-size: 12px; }.commission-option small { margin-top: 3px; color: var(--muted); font-size: 10px; }.commission-option strong { margin-left: auto; color: var(--lilac-dark); font-size: 11px; }.full { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }.full[hidden] { display: none; }.publish-modal-content label { display: block; margin: 19px 0; color: #504a5c; font-size: 12px; font-weight: 700; }.publish-modal-content label input:not([type="checkbox"]) { display: block; width: 100%; height: 42px; margin-top: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--ink); }
/* Indice "tape # pour des suggestions" sous la légende de publication et la
   description d'édition (voir attachHashtagAutocomplete côté JS) : texte allégé,
   pas au même poids que le libellé du champ juste au-dessus. */
.publish-modal-content label small { display: block; margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.publish-modal-content label select { display: block; width: 100%; height: 42px; margin-top: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--ink); background: var(--card); font: inherit; }
/* Description (Publier + Modifier l'œuvre) : contrairement à tous les autres
   textarea de l'app (voir #offer-form, #quote-form, [data-profile-form]...),
   celui-ci n'avait jamais eu de règle dédiée — il retombait donc sur le style
   par défaut du navigateur (police système/monospace, couleurs non reliées au
   thème du site) au lieu d'hériter de la charte Mosalea. */
.publish-modal-content label textarea { display: block; width: 100%; min-height: 90px; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; resize: vertical; color: var(--ink); background: var(--card); font: inherit; font-size: 13px; line-height: 1.5; }
/* Filigrane / vente du téléchargement (Publier + Modifier l'œuvre) : remis en forme
   après l'audit UI/UX du 28 juillet 2026 - avant, ces cases se retrouvaient géantes
   et centrées au-dessus de leur texte (la règle générique ".publish-modal-content
   label { display: block }" ci-dessus, plus spécifique que ".settings-toggle-row",
   écrasait sa mise en page en ligne). On réutilise le même interrupteur que les
   préférences de notifications des Paramètres, dans une petite carte groupée. */
.publish-modal-content .publish-option-row { display: flex; margin: 0; }
.publish-options-card { display: flex; flex-direction: column; gap: 14px; margin: 19px 0; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--secondary); }
.publish-option-nested { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
body.dark .publish-option-nested { border-color: var(--border); }
/* .publish-modal-content label.xxx bat ".publish-modal-content label" en spécificité
   (une classe de plus) sans recourir à !important. */
.publish-modal-content label.publish-standalone-toggle { margin: 19px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--secondary); }
.publish-modal-content label.publish-price-field { margin: 4px 0 0; padding: 12px 14px 12px 16px; border-left: 2px solid var(--lilac); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--lilac) 7%, transparent); color: var(--muted); font-size: 11px; font-weight: 600; }
.publish-modal-content label.publish-price-field[hidden] { display: none; }
body.dark .publish-price-field { color: var(--muted-foreground); }
.publish-price-field input { margin-top: 6px; }
/* Message affiché à la place du champ de prix quand Stripe n'est pas encore
   connecté, avec un raccourci pour y remédier sans quitter la modale. */
.publish-payout-warning { margin: 2px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--destructive) 42%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--destructive) 9%, var(--card)); color: var(--card-foreground); font-size: 11px; font-weight: 600; line-height: 1.5; }
.publish-payout-warning-actions { display: flex; gap: 14px; margin-top: 6px; }
.publish-payout-warning-actions .text-button { padding: 0; font-size: 11px; font-weight: 700; color: var(--lilac); }
.settings-toggle-row input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.upload-drop { position: relative; display: grid; place-items: center; gap: 5px; min-height: 135px; margin-top: 20px; padding: 20px; overflow: hidden; border: 1px dashed #b9add6; border-radius: 13px; color: #665a76; background: #faf8fd; text-align: center; }
/* Aperçu miniature ajouté après l'audit UI/UX du 28 juillet 2026 : avant, on ne
   voyait que le nom du fichier choisi, jamais l'image elle-même avant publication. */
.upload-drop-preview { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-drop.has-preview { border-style: solid; }
.upload-drop.has-preview span, .upload-drop.has-preview b { display: none; }
.upload-drop.has-preview small { position: relative; z-index: 1; padding: 4px 9px; border-radius: 7px; color: #fff; background: rgba(20,16,30,.6); }.upload-drop span { color: var(--lilac); font-size: 27px; }.upload-drop b { font-size: 13px; }.upload-drop small { color: var(--muted); font-size: 10px; }.content-settings { display: flex; align-items: center; gap: 7px; margin-bottom: 21px; }.content-settings > span { margin-right: auto; font-size: 12px; font-weight: 700; }.content-settings button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: #766f80; background: white; font-size: 10px; }.content-settings button.selected { border-color: #9dd4b9; color: #4d8f70; background: #edf9f2; }.toast { position: fixed; z-index: 30; bottom: 24px; left: 50%; max-width: calc(100% - 30px); padding: 11px 15px; border-radius: 10px; color: white; background: #332d43; box-shadow: 0 10px 25px rgba(24,16,40,.25); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .22s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(7px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* #8a640b passe l'AA (~5.4:1) sur les cartes claires ; sur fond sombre il devient trop
   foncé, d'où la nuance plus claire (#b5860f, ~4.7:1) réservée au thème sombre. */
.result-rating { color: #8a640b; font-weight: 700; }
body.dark .result-rating { color: #b5860f; }
.admin-order-thread-log { max-height: 50vh; padding: 0; overflow: auto; }
.admin-thread-bubble { max-width: 100%; }
.admin-thread-bubble b { display: block; margin-bottom: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
/* La grille de stats admin et les cartes (.admin-stat-card) sont redéfinies
   plus bas dans une version enrichie (icône, groupes thématiques) qui remplace
   entièrement cette ancienne mise en page à fond blanc fixe. */

body.dark { --ink: #f3eff9; --muted: #aea7bb; --line: #393345; --paper: #211c2b; --sidebar: #292332; --lavender: #372e4d; --shadow: 0 18px 50px rgba(0,0,0,.25); }.dark .mini-card, .dark .artist-result, .dark .order-card, .dark .creator-dash > section, .dark .messages-layout, .dark .modal, .dark .big-search, .dark .profile-pill, .dark .round-button, .dark .secondary-button, .dark .commission-option, .dark .filter-chips button, .dark .admin-stat-card { background: #2b2535; }.dark .filters .check > span, .dark .filters .radio > span { background: #2b2535; }.dark .artist-result .result-tags span, .dark .message-search { background: #37313f; }.dark .match-card { background: linear-gradient(141deg, #302841, #2b2535); }.dark .safety-card { background: #24362e; border-color: #385447; }.dark .nav-link:hover, .dark .nav-link.active { background: #39304d; }.dark .order-context { background: #342b46; }.dark .chat-compose { background: #2b2535; }.dark .chat-compose input { background: #2b2535; color: var(--ink); }.dark .conversation.active { background: #3b3150; }.dark .bubble.other { background: #393240; color: #eee9f5; }.dark .upload-drop { background: #292331; }

@media (max-width: 1050px) { .sidebar { width: 206px; }.brand { font-size: 24px; }.nav-link { gap: 11px; }.app-shell main { width: calc(100% - 206px); margin-left: 206px; }.view { padding: 30px; }.feed-layout { grid-template-columns: minmax(420px,1fr) 275px; }.artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.artist-body { margin: 0; }.artist-profile-head { margin-left: 0; margin-right: 0; }.portfolio-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 780px) { .sidebar { position: fixed; inset: auto 0 0; width: 100%; height: 63px; padding: 7px 11px; flex-direction: row; background: rgba(245,241,248,.96); border-top: 1px solid var(--line); border-right: 0; backdrop-filter: blur(14px); }.brand, .sidebar-bottom .create-button, .profile-pill { display: none; }.main-nav { display: flex; justify-content: space-between; width: 100%; gap: 0; margin: 0; }.nav-link { display: grid; place-items: center; flex: 1; min-height: 48px; padding: 2px 0; border-radius: 11px; font-size: 9px; }.nav-link > span { width: auto; font-size: 18px; }.nav-link b { position: absolute; margin: -28px 0 0 23px; }.sidebar-bottom { margin: 0; }.app-shell main { width: 100%; margin-left: 0; }.view { min-height: calc(100vh - 63px); padding: 20px 17px 85px; }.topbar { align-items: flex-start; }.topbar h1 { font-size: 32px; }.feed-switch { gap: 15px; overflow-x: auto; }.feed-status { display: none; }.feed-layout { display: block; padding-top: 18px; }.feature-post { min-height: 540px; border-radius: 19px; }.feed-aside { grid-template-columns: 1fr; margin-top: 17px; }.artist-of-day { display: none; }.search-hero { padding-top: 11px; }.search-hero h1 { font-size: 32px; }.big-search { height: 52px; }.big-search button { padding: 0 11px; }.search-content { display: block; }.filters { display: none; }.artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.result-art { height: 145px; }.result-info { padding: 10px; }.result-info h3 { font-size: 15px; }.result-tags { display: none; }.results-top { margin-top: 9px; }.artist-cover { height: 145px; }.artist-profile-head { flex-wrap: wrap; gap: 11px; margin-top: -38px; }.profile-avatar { width: 74px; height: 74px; font-size: 32px; }.artist-profile-head h1 { font-size: 27px; }.profile-actions { width: 100%; margin: 5px 0 0; }.profile-actions button { flex: 1; }.artist-body { grid-template-columns: 1fr; gap: 22px; }.artist-info { border-bottom: 1px solid var(--line); padding-bottom: 16px; }.portfolio-grid { grid-template-columns: repeat(2, 1fr); }.portfolio-card { min-height: 140px; }.page-header { display: block; }.page-header p:last-child { margin-top: 14px; }.order-card { flex-wrap: wrap; gap: 14px; padding: 13px; }.order-art { width: 75px; height: 75px; }.order-side { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 2px; }.order-side .secondary-button { margin: 0; }.progress-steps { overflow: hidden; gap: 14px; justify-content: flex-start; white-space: nowrap; }.messages-layout { grid-template-columns: 1fr; height: auto; }.conversation-list { display: none; }.chat-panel { min-height: 500px; }.collection-row { grid-template-columns: 1fr; }.creator-dash { grid-template-columns: repeat(2,1fr); }.creator-dash > section:first-child { grid-column: 1/-1; }.modal { padding: 28px 19px; }.commission-option { align-items: flex-start; }.commission-option strong { max-width: 78px; text-align: right; white-space: normal; }.dark .sidebar { background: rgba(41,35,50,.96); } }

/* --- 2/6 : fixes.css --- */
/* Correctifs du feed vertical : appliqués après la feuille principale. */
.order-art {
  position: relative;
  overflow: hidden;
}

.result-art {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

.auth-forgot-link {
  display: block;
  margin: 8px 0 0 !important;
  margin-left: auto !important;
  text-align: right;
  font-size: 11px !important;
}

@media (max-width: 780px) {
  .feed-scroller {
    height: calc(100vh - 208px);
    min-height: 510px;
    border-radius: 19px;
  }

  .feed-post {
    height: calc(100vh - 208px);
    min-height: 510px;
  }
}

/* --- 3/6 : user-palette.css --- */
/* Palette et tokens fournis pour Atelier.
   Adaptation CSS autonome : le bouton de thème ajoute/enlève body.dark. */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.9916 0.005 228.8162);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.7622 0.1431 234.9356);
  --primary-foreground: oklch(0.9851 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.7622 0.1431 234.9356);
  --muted-ui: oklch(0.9421 0.035 229.2919);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.8786 0.0744 229.8742);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.7622 0.1431 234.9356);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.81 0.1 252);
  --chart-2: oklch(0.62 0.19 260);
  --chart-3: oklch(0.55 0.22 263);
  --chart-4: oklch(0.49 0.22 264);
  --chart-5: oklch(0.42 0.18 266);
  --sidebar-ui: oklch(1 0 0);
  --sidebar-foreground-ui: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.7622 0.1431 234.9356);
  --sidebar-primary-foreground: oklch(0.9851 0 0);
  --sidebar-accent: oklch(0.8786 0.0744 229.8742);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.709 0 0);
  --radius: .625rem;
  --shadow-sm-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 1px 2px -1px hsl(0 0% 0% / .10);
  --shadow-md-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 2px 4px -1px hsl(0 0% 0% / .10);

  /* Pont vers les composants existants du MVP. */
  --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(--destructive);
  --mint: var(--accent);
  --shadow: var(--shadow-md-ui);
}

body.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.7322 0.1422 252.6973);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(1 0 0);
  --primary: oklch(0.7622 0.1431 234.9356);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.7622 0.1431 234.9356);
  --muted-ui: oklch(0.269 0 0);
  --muted-foreground: oklch(0.8699 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.824 0.1077 231.5742);
  --destructive: oklch(0.7022 0.1892 22.2279);
  --border: oklch(0.2768 0 0);
  --input: oklch(0.325 0 0);
  --ring: oklch(0.556 0 0);
  --sidebar-ui: oklch(0.205 0 0);
  --sidebar-foreground-ui: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.275 0 0);
  --sidebar-ring: oklch(0.439 0 0);
  --shadow-sm-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 1px 2px -1px hsl(0 0% 0% / .10);
  --shadow-md-ui: 0 1px 3px 0 hsl(0 0% 0% / .10), 0 2px 4px -1px hsl(0 0% 0% / .10);
  --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(--destructive);
  --mint: var(--accent);
  --shadow: var(--shadow-md-ui);
}

html, body, main { background: var(--background); }
body { color: var(--foreground); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font-family: inherit; }
h1, h2, h3, .brand, .post-caption strong, .order-info h2, .collection h2, .artist-profile-head h1, .match-card h2, .creator-dash h2, .modal h2, .result-info h3 { font-family: "Fraunces", Georgia, serif; letter-spacing: -.045em; }
.eyebrow, .visual-stamp, .scroll-cue { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.sidebar { background: var(--sidebar-ui); border-color: var(--border); }.brand { color: var(--sidebar-foreground-ui); }.brand-mark { color: var(--primary-foreground); background: var(--primary); }.nav-link { color: var(--muted-foreground); }.nav-link > span { color: currentColor; }.nav-link:hover { color: var(--secondary-foreground); background: var(--secondary); }.nav-link.active { color: var(--primary-foreground); background: var(--primary); }.nav-link.active > span { color: inherit; }.nav-link b { color: var(--primary-foreground); background: var(--destructive); }.create-button { color: var(--primary-foreground); background: var(--primary); box-shadow: var(--shadow-sm-ui); }.create-button:hover { background: var(--foreground); }.profile-pill { color: var(--sidebar-foreground-ui); background: var(--secondary); }.profile-pill small, .profile-pill i { color: var(--muted-foreground); }

.eyebrow { color: var(--muted-foreground); }.round-button { border-color: var(--border); color: var(--foreground); background: var(--card); box-shadow: none; }.round-button:hover { border-color: var(--ring); color: var(--primary-foreground); background: var(--primary); }.feed-switch, .page-header, .profile-tabs { border-color: var(--border); }.feed-tab { color: var(--muted-foreground); }.feed-tab.active { color: var(--foreground); border-color: var(--primary); }.feed-status { color: var(--muted-foreground); }.feed-status i { background: var(--primary); }

.feed-scroller { border-color: var(--border); background: var(--card); box-shadow: var(--shadow-md-ui); }.feature-post, .feed-post { background: var(--card); }.content-label { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }.ghost-icon { color: var(--foreground); background: color-mix(in oklch, var(--background) 70%, transparent); border-color: var(--border); }.post-caption { text-shadow: 0 1px 8px color-mix(in srgb, #000 28%, transparent); }.post-actions .post-action { border-color: color-mix(in oklch, var(--border) 70%, transparent); background: color-mix(in oklch, var(--background) 75%, transparent); }.post-action:hover, .post-action.liked, .post-action.saved { color: var(--primary-foreground); background: var(--primary); }.next-art { border-color: var(--border); color: var(--foreground); background: color-mix(in oklch, var(--background) 75%, transparent); }.next-art:hover { color: var(--primary-foreground); background: var(--primary); }

/* Les cinq bleus de ta palette servent aux aperçus neutres de portfolio. */
.art-aurora { background: var(--chart-3) !important; }.art-aurora:before { background: var(--chart-1); }.art-aurora:after { background: var(--chart-5); }.art-poppy { background: var(--chart-2) !important; }.art-poppy:before { background: var(--chart-5); }.art-poppy:after { background: var(--chart-1); }.art-bluebell { background: var(--chart-4) !important; }.art-bluebell:before { background: var(--chart-1); }.art-bluebell:after { background: var(--chart-5); }.art-garden { background: var(--chart-1) !important; }.art-garden:before { background: var(--chart-4); }.art-garden:after { background: var(--chart-2); }.art-sunset { background: var(--chart-5) !important; }.art-sunset:before { background: var(--chart-2); }.art-sunset:after { background: var(--chart-1); }.art-lilac { background: var(--chart-2) !important; }.art-lilac:before { background: var(--chart-4); }.art-lilac:after { background: var(--chart-1); }

.mini-card, .artist-result, .order-card, .creator-dash > section { border-color: var(--border); background: var(--card); box-shadow: var(--shadow-sm-ui); }.match-card { background: var(--secondary); }.mini-card-title, .daily-artist b { color: var(--card-foreground); }.mini-icon { color: var(--primary-foreground); background: var(--primary); }.match-card p, .daily-artist small { color: var(--muted-foreground); }.tag-row button, .profile-tags span { color: var(--secondary-foreground); background: var(--secondary); }.text-button, .back-link { color: var(--primary); }.safety-card { border-color: var(--border); background: var(--secondary); }.shield { color: var(--primary-foreground); background: var(--primary); }.safety-card b { color: var(--foreground); }.safety-card p { color: var(--muted-foreground); }

.big-search { border-color: var(--input); background: var(--card); box-shadow: var(--shadow-sm-ui); }.big-search input { color: var(--foreground); }.big-search button, .primary-button { color: var(--primary-foreground); background: var(--primary); }.big-search button:hover, .primary-button:hover { background: var(--foreground); }.popular-searches { color: var(--muted-foreground); }.popular-searches button { color: var(--primary); }.filters { border-color: var(--border); }.filter-heading h2, summary { color: var(--foreground); }.range-values, .check, .radio { color: var(--muted-foreground); }.check > span, .radio > span { border-color: var(--input); background: var(--card); }.check input:checked + span { border-color: var(--primary); background: var(--primary); }.filter-chips button, .content-settings button { border-color: var(--input); color: var(--muted-foreground); background: var(--card); }.filter-chips button.selected { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }.results-top { border-color: var(--border); }.results-top p { color: var(--muted-foreground); }.results-top strong, .results-top b, .sort-select select { color: var(--foreground); }.artist-result { background: var(--card); }.result-art { border-color: var(--border); }.result-info { background: var(--card); }.result-artist { border: 0; background: transparent; }.result-artist b, .result-info h3, .result-price { color: var(--card-foreground); }.result-artist small, .result-meta { color: var(--muted-foreground); }.availability { color: var(--primary); }.result-tags span { color: var(--secondary-foreground); background: var(--secondary); }

.artist-cover { border-color: var(--border); background: var(--chart-4); }.artist-cover:before { background: color-mix(in oklch, var(--chart-1) 32%, transparent); }.artist-cover:after { border-color: color-mix(in oklch, var(--chart-2) 45%, transparent); }.artist-cover span { background: var(--chart-1); }.handle, .artist-info, .order-info p, .page-header p:last-child { color: var(--muted-foreground); }.info-line { color: var(--card-foreground); }.verified { color: var(--primary-foreground); background: var(--primary); }.secondary-button { border-color: var(--input); color: var(--foreground); background: var(--card); }.secondary-button:hover { color: var(--primary-foreground); background: var(--primary); }.profile-tabs button, .order-tabs button { color: var(--muted-foreground); }.profile-tabs button.active, .order-tabs button.active { color: var(--foreground); border-color: var(--primary); }.portfolio-card { border-color: var(--border); }.status.progress { color: var(--primary-foreground); background: var(--primary); }.status.pending { color: var(--primary-foreground); background: var(--destructive); }.progress-track { background: var(--secondary); }.progress-track span { background: var(--primary); }

.messages-layout { border-color: var(--border); background: var(--card); }.conversation-list, .chat-head, .chat-compose { border-color: var(--border); }.message-search { background: var(--secondary); }.message-search input { color: var(--foreground); }.conversation { color: var(--foreground); }.conversation:hover { background: var(--secondary); }.conversation.active { color: var(--primary-foreground); background: var(--primary); }.conversation.active small, .conversation.active time { color: color-mix(in oklch, var(--primary-foreground) 72%, transparent); }.chat-panel { background: var(--card); }.chat-head small { color: var(--muted-foreground); }.order-context { background: var(--secondary); }.order-context b { color: var(--foreground); }.bubble { color: var(--card-foreground); background: var(--secondary); }.bubble.mine { color: var(--primary-foreground); background: var(--primary); }.chat-compose input { color: var(--foreground); background: var(--card); }.chat-compose button { color: var(--primary-foreground); background: var(--primary); }

.modal { color: var(--card-foreground); background: var(--popover); box-shadow: 0 22px 80px hsl(0 0% 0% / .25); }.modal .eyebrow { color: var(--muted-foreground); }.modal-close { color: var(--primary-foreground); background: var(--primary); }.commission-option { border-color: var(--border); background: var(--card); }.commission-option.selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }.upload-drop { border-color: var(--input); background: var(--secondary); }

/* Mode clair : même système, sans simple inversion du noir. */
body:not(.dark) .sidebar { background: var(--sidebar-ui); }.sidebar .profile-pill { border: 1px solid var(--border); }.sidebar .profile-pill .avatar { border-color: var(--border); }body:not(.dark) .feed-scroller { background: #f8f9ff; }.feature-post, .feed-post { border-color: var(--border); }body:not(.dark) .ghost-icon { color: var(--foreground); background: rgba(255,255,255,.78); }body:not(.dark) .post-actions .post-action, body:not(.dark) .next-art { color: var(--foreground); background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.85); }body:not(.dark) .post-action:hover, body:not(.dark) .post-action.liked, body:not(.dark) .post-action.saved, body:not(.dark) .next-art:hover { color: var(--primary-foreground); background: var(--primary); }body:not(.dark) .feed-status { color: var(--muted-foreground); }body:not(.dark) .feed-status i { background: var(--primary); }body:not(.dark) .mini-card, body:not(.dark) .artist-result, body:not(.dark) .order-card, body:not(.dark) .creator-dash > section { background: var(--card); }body:not(.dark) .match-card, body:not(.dark) .safety-card, body:not(.dark) .message-search, body:not(.dark) .order-context { background: var(--secondary); }body:not(.dark) .messages-layout, body:not(.dark) .chat-panel, body:not(.dark) .chat-compose { background: var(--card); }body:not(.dark) .conversation:hover { background: var(--secondary); }body:not(.dark) .bubble { background: var(--secondary); }body:not(.dark) .chat-compose input { background: var(--card); }body:not(.dark) .result-info { background: var(--card); }

@media (max-width: 780px) { .dark .sidebar { background: rgba(37,37,37,.96); }.dark .nav-link { color: var(--muted-foreground); }.dark .nav-link.active { color: var(--primary-foreground); background: var(--primary); } }

/* --- 4/6 : visual-polish.css --- */
/* 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; align-content: start; align-items: start; 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; }
.referral-link-row { display: flex; gap: 6px; margin-top: 10px; }.referral-link-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted-foreground); background: var(--secondary); font-size: 11px; }.referral-link-row .secondary-button { flex: 0 0 auto; min-height: 0; padding: 0 12px; font-size: 11px; }.referral-stats { margin: 9px 0 0; color: var(--primary); font-size: 11px; font-weight: 600; }
.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-discovery-sources { margin-top: 12px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm-ui); }
.creator-discovery-sources h3 { margin: 0 0 12px; color: var(--card-foreground); font-size: 13px; }
.discovery-source-list { display: grid; gap: 9px; }
.discovery-source-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.discovery-source-label { color: var(--muted-foreground); font-size: 11px; }
.discovery-source-bar { display: block; height: 6px; overflow: hidden; border-radius: 4px; background: var(--secondary); }
.discovery-source-bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.discovery-source-value { color: var(--card-foreground); font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (max-width: 780px) { .discovery-source-row { grid-template-columns: 100px minmax(0, 1fr) auto; } .discovery-source-label { font-size: 10px; } }
.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(2, 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; }
.artist-availability-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid color-mix(in oklch, var(--border) 78%, transparent); }
.artist-availability-facts div { display: flex; flex-direction: column; gap: 2px; }
.artist-availability-facts dt { color: var(--muted-foreground); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.artist-availability-facts dd { margin: 0; color: var(--card-foreground); font-size: 12px; font-weight: 600; }
.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); }
/* Corrige une incohérence visuelle : seul le <textarea> était stylé ci-dessus, donc tout
   <input> placé dans un .brief-field (titre, budget, délai…) retombait sur l'apparence par
   défaut du navigateur — blanc pour le texte, gris pour les number/date — au lieu de suivre
   le thème sombre de la modale. Repéré sur la nouvelle modale "Publier une demande", mais le
   champ budget de la modale de commande existante avait le même défaut. */
.brief-field input,
.brief-field select { width: 100%; box-sizing: border-box; height: 38px; padding: 0 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 input:focus,
.brief-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent); }
body.dark .brief-field input, body.dark .brief-field select { color-scheme: dark; }
body:not(.dark) .brief-field input, body:not(.dark) .brief-field select { color-scheme: light; }
.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; } }

/* Preuve de création humaine : galerie d'étapes de processus (croquis, WIP)
   dans la modale d'œuvre. */
.artwork-process { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.artwork-process-head { margin: 0 0 10px; }
.artwork-process-head .reliability-badge { margin-left: 0; }
.artwork-process-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.artwork-process-gallery[hidden] { display: none; }
.artwork-process-step { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: var(--secondary); }
.artwork-process-step img { display: block; width: 100%; height: 84px; object-fit: cover; }
.artwork-process-step figcaption { padding: 4px 6px; color: var(--muted-foreground); font-size: 10px; }
.artwork-process-step-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; color: #fff; background: rgba(20,16,30,.6); font-size: 13px; line-height: 1; cursor: pointer; }
.artwork-process-upload { min-height: unset; margin-top: 0; padding: 10px 14px; font-size: 11px; }
.artwork-process-upload[hidden] { display: none; }
.artwork-process-upload small { color: var(--muted-foreground); font-size: 10px; }

/* Listes d'envies partageables : bandeau d'activation/lien sur "Mes inspirations". */
.wishlist-share { margin: 16px 0 24px; }
.wishlist-share-active { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.wishlist-share-active[hidden] { display: none; }
#wishlist-share-link { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--input); border-radius: 8px; color: var(--muted-foreground); background: var(--secondary); font-size: 12px; }

/* --- 5/6 : gallery-direction.css --- */
/*
  Direction Atelier — galerie éditoriale
  Cette couche remplace les codes « dashboard / IA » par un cadre calme,
  minéral et chaleureux. Les couleurs fortes restent réservées aux œuvres.
*/

:root {
  --background: #f4f0e8;
  --foreground: #28221e;
  --card: #fbf8f2;
  --card-foreground: #28221e;
  --popover: #fbf8f2;
  --popover-foreground: #28221e;
  --primary: #1d6f98;
  --primary-foreground: #fffdf8;
  --secondary: #ece5d9;
  --secondary-foreground: #245b77;
  --muted-ui: #e8e1d6;
  --muted-foreground: #746b62;
  --accent: #e5d9cc;
  --accent-foreground: #28221e;
  --destructive: #d8573f;
  --border: #d9d0c4;
  --input: #bdb1a3;
  --ring: #536a76;
  --sidebar-ui: #f8f4ec;
  --sidebar-foreground-ui: #28221e;
  --sidebar-primary: #536a76;
  --sidebar-primary-foreground: #fffdf8;
  --sidebar-accent: #e9e1d5;
  --sidebar-accent-foreground: #28221e;
  --sidebar-border: #d9d0c4;
  --sidebar-ring: #536a76;
  --radius: .5rem;
  --shadow-sm-ui: 0 2px 8px rgba(53, 43, 34, .045);
  --shadow-md-ui: 0 12px 32px rgba(53, 43, 34, .07);

  --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(--destructive);
  --mint: var(--accent);
  --shadow: var(--shadow-md-ui);
}

body.dark {
  --background: #1b1714;
  --foreground: #f3ede4;
  --card: #25201c;
  --card-foreground: #f3ede4;
  --popover: #2b2520;
  --popover-foreground: #f3ede4;
  --primary: #68c6e9;
  --primary-foreground: #1b1714;
  --secondary: #332c26;
  --secondary-foreground: #9cd8ef;
  --muted-ui: #332c26;
  --muted-foreground: #b8aea3;
  --accent: #3d342d;
  --accent-foreground: #f3ede4;
  --destructive: #ef8068;
  --border: #443a31;
  --input: #695d52;
  --ring: #a4bec8;
  --sidebar-ui: #201b17;
  --sidebar-foreground-ui: #f3ede4;
  --sidebar-primary: #93aab4;
  --sidebar-primary-foreground: #1b1714;
  --sidebar-accent: #332c26;
  --sidebar-accent-foreground: #f3ede4;
  --sidebar-border: #443a31;
  --sidebar-ring: #a4bec8;
  --shadow-sm-ui: 0 2px 9px rgba(0, 0, 0, .14);
  --shadow-md-ui: 0 14px 36px rgba(0, 0, 0, .18);
}

html, body, main { background: var(--background); }

/* Barre blanche en haut lors d'un sur-defilement (constat du 13/09/2026).
   Cause : les variables de theme sont declarees sur `body.dark`, et les custom
   properties n'heritent QUE vers le bas. <html>, parent de <body>, ne les voit
   donc jamais : la regle `html, body, main { background: var(--background) }`
   juste au-dessus resolvait, pour <html> seul, le --background CLAIR de :root.
   <html> restait peint en blanc meme en theme sombre -- invisible tant qu'on ne
   depasse pas les bords, mais le canevas de la page apparait des qu'on tire vers
   le haut (rebond de sur-defilement). La barre ne couvrait pas la barre laterale
   parce que celle-ci est fixe et reste peinte par-dessus.
   Correctif : redeclarer le token au niveau de <html> aussi. La declaration sur
   body.dark est conservee, des dizaines de selecteurs en dependent.
   Le rebond n'est volontairement PAS desactive (overscroll-behavior) : il est
   attendu sur trackpad et sur mobile, ou il porte le tirer-pour-rafraichir. */
html:has(body.dark) { --background: #1b1714; }
html:not(:has(body.dark)) { background: color-mix(in oklch, var(--background) 94%, var(--primary) 6%); }
body {
  position: relative;
  color: var(--foreground);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
}
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E");
}
body.dark::before { opacity: .026; }
.app-shell { position: relative; z-index: 1; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 34%, transparent);
  outline-offset: 2px;
}

h1, h2, h3, .brand, .post-caption strong, .order-info h2, .collection h2, .artist-profile-head h1, .match-card h2, .creator-dash h2, .modal h2, .result-info h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.035em;
}
.eyebrow, .visual-stamp, .scroll-cue, .pricing-kicker, .summary-kicker, .card-kicker {
  font-family: "DM Sans", ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Navigation : une signature dessinée plutôt qu'un monogramme d'application. */
.sidebar { overflow: hidden; background: var(--sidebar-ui); border-right-color: var(--border); transition: width .2s ease, padding .2s ease; }
main { transition: width .2s ease, margin-left .2s ease; }
.sidebar-header { display: flex; align-items: center; gap: 10px; }
.brand { gap: 10px; padding-left: 0; color: var(--sidebar-foreground-ui); font-size: 28px; }
.sidebar-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--sidebar-foreground-ui);
  background: transparent;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.sidebar-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.sidebar-toggle:hover { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }
.brand-mark {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 22px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 25px;
  height: 3px;
  background: currentColor;
  transform-origin: left center;
}
.brand-mark::before { top: 7px; transform: rotate(-11deg); }
.brand-mark::after { top: 14px; left: 5px; width: 20px; opacity: .62; transform: rotate(8deg); }
.nav-link { border-radius: 5px; color: var(--muted-foreground); }
.nav-link .nav-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  overflow: visible;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}
.nav-link:hover { color: var(--foreground); background: var(--secondary); }
.nav-link.active {
  color: var(--foreground);
  background: var(--accent);
  box-shadow: inset 2px 0 0 var(--primary);
}
.nav-link.active .nav-icon { color: var(--primary); }
.nav-link b { color: #fffdf8; background: var(--destructive); }
.create-button { border-radius: 6px; color: var(--primary-foreground); background: var(--primary); box-shadow: none; }
.create-button:hover { background: var(--foreground); }
.create-icon { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.profile-pill { border: 1px solid var(--border); border-radius: 7px; color: var(--sidebar-foreground-ui); background: transparent; box-shadow: none; }
.profile-pill small, .profile-pill i { color: var(--muted-foreground); }
.mobile-profile-link { display: none; }
.sidebar.is-collapsed { width: 72px; padding: 24px 10px 16px; }
.sidebar.is-collapsed .sidebar-header { justify-content: center; }
.sidebar.is-collapsed .brand { display: none; }
.sidebar.is-collapsed .main-nav { gap: 10px; margin-top: 38px; }
.sidebar.is-collapsed .nav-link { justify-content: center; gap: 0; padding: 0; font-size: 0; }
.sidebar.is-collapsed .nav-link .nav-icon { width: 20px; height: 20px; }
.sidebar.is-collapsed .nav-link b { display: none; }
.sidebar.is-collapsed .sidebar-bottom { gap: 12px; }
.sidebar.is-collapsed .create-button { width: 42px; height: 42px; margin: 0 auto; padding: 0; font-size: 0; }
.sidebar.is-collapsed .create-button .create-icon { width: 18px; height: 18px; }

.install-app-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px; border: 1px solid var(--border); border-radius: 7px; color: var(--foreground); background: transparent; font-weight: 600; font-size: 13px; transition: .18s ease; }
/* Sans ce garde-fou, updateInstallButtonVisibility() avait beau mettre .hidden = true
   (app déjà installée / navigateur non compatible et pas iOS), le display:flex
   ci-dessus l'emportait sur le display:none natif de [hidden] : le bouton
   "Installer l'application" restait affiché en permanence, pour tout le monde. */
.install-app-button[hidden] { display: none; }
.install-app-button:hover { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }
.install-app-button .nav-icon { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sidebar.is-collapsed .install-app-button { width: 42px; height: 42px; margin: 0 auto; padding: 0; font-size: 0; }
.sidebar.is-collapsed .install-app-button .nav-icon { width: 18px; height: 18px; }
.install-instructions-steps { display: grid; gap: 10px; margin: 14px 0; padding-left: 20px; color: var(--foreground); font-size: 14px; line-height: 1.5; }
.portfolio-grid > .portfolio-collection { grid-column: 1 / -1; }
.portfolio-collection + .portfolio-collection { margin-top: 22px; }
.portfolio-collection-title { margin: 0 0 12px; color: var(--foreground); font-size: 15px; font-weight: 700; }
.portfolio-collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1050px) { .portfolio-collection-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 780px) { .portfolio-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }
.creator-collections-list { margin-bottom: 10px; }
.creator-collections-items { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.creator-collection-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
.creator-collection-item span { font-weight: 600; }
.creator-collection-item div { display: flex; gap: 6px; flex: 0 0 auto; }
.availability-alert-row { margin-top: 12px; }
.availability-alert-button.is-subscribed { border-color: var(--primary); color: var(--primary); }
.modal-hint { display: block; margin-top: 6px; color: var(--muted-foreground); font-size: 12px; }
/* Sans ce garde-fou, #founding-artist-status et #availability-alert-hint (masqués/
   affichés dynamiquement par JS via .hidden) restaient visibles en permanence,
   parfois avec un texte obsolète d'un rendu précédent : le display:block ci-dessus
   écrasait le display:none natif de [hidden]. */
.modal-hint[hidden] { display: none; }
.sidebar.is-collapsed .profile-pill { justify-content: center; width: 42px; margin: 0 auto; padding: 3px; }
.sidebar.is-collapsed .profile-pill > span:nth-child(2), .sidebar.is-collapsed .profile-pill i { display: none; }
.sidebar.is-collapsed ~ main { width: calc(100% - 72px); margin-left: 72px; transition: width .2s ease, margin-left .2s ease; }

/* Titres, onglets et actions : la lisibilité avant les effets. */
.eyebrow { color: var(--primary); font-size: 10px; }
h1 { letter-spacing: -.045em; }
.round-button, .secondary-button, .primary-button { border-radius: 6px; }
.round-button { border-color: var(--border); color: var(--foreground); background: transparent; box-shadow: none; }
.round-button:hover { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }
.primary-button, .big-search button { color: var(--primary-foreground); background: var(--primary); }
.primary-button:hover, .big-search button:hover { background: var(--foreground); }
.secondary-button { border-color: var(--border); color: var(--foreground); background: transparent; }
.secondary-button:hover { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }
.profile-account-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-account-actions .eyebrow { margin: 0 0 2px; }
.account-danger-button { border-color: #c0435a; color: #c0435a; }
.account-danger-button:hover, .account-danger-button:focus-visible { border-color: #c0435a; color: #fff; background: #c0435a; }
button.primary-button.account-danger-button { color: #fff; background: #c0435a; border-color: #c0435a; }
button.primary-button.account-danger-button:hover { background: #a4374a; }
/* Même correction de contraste que .account-menu-danger : #c0435a est trop peu contrasté
   sur fond sombre pour du texte de bouton au repos (voir commentaire ci-dessus). */
body.dark .account-danger-button { border-color: #e0677f; color: #e0677f; }
body.dark .account-danger-button:hover, body.dark .account-danger-button:focus-visible { border-color: #c0435a; color: #fff; background: #c0435a; }
.feed-switch, .page-header, .profile-tabs { border-color: var(--border); }
.feed-tab { border-radius: 0; color: var(--muted-foreground); }
.feed-tab.active { color: var(--foreground); border-color: var(--primary); }
.feed-status { color: var(--muted-foreground); }
.feed-status i { background: var(--destructive); }

/* Feed : l'œuvre ressemble à un portfolio, l'interface se retire. */
.feed-layout { gap: 30px; }
.feed-scroller { border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-md-ui); outline: 0; }
.feed-post, .feature-post { background: var(--card); }
.post-visual { isolation: isolate; }
.post-visual::after { opacity: .58; }
.content-label {
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 3px;
  color: #fffdf8;
  background: rgba(31, 25, 22, .56);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.visual-stamp {
  color: rgba(255,253,248,.9);
  background: rgba(31, 25, 22, .3);
  border: 1px solid rgba(255,253,248,.34);
  border-radius: 3px;
}
.ghost-icon, .post-actions .post-action, .next-art {
  border-color: rgba(255,255,255,.32);
  border-radius: 5px;
  color: #fffdf8;
  background: rgba(31, 25, 22, .34);
  backdrop-filter: none;
}
.post-action:hover, .post-action.liked, .post-action.saved, .next-art:hover {
  color: var(--primary-foreground);
  background: var(--primary);
}
.save-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.save-icon { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.save-button.saved .save-icon { fill: currentColor; }
.post-caption { text-shadow: 0 1px 9px rgba(25, 19, 16, .42); }
.scroll-cue { color: rgba(255,253,248,.83); }

/* Cartes : papier, bordure fine, aucun effet de tableau de bord. */
.mini-card, .artist-result, .order-card, .creator-dash > section, .creator-side-card, .creator-metrics article, .creator-request-list article {
  border-color: var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm-ui);
}
.mini-card:hover, .artist-result:hover, .order-card:hover, .creator-side-card:hover, .creator-metrics article:hover, .creator-request-list article:hover {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
  box-shadow: var(--shadow-md-ui);
  transform: translateY(-1px);
}
.match-card, .safety-card { border-color: var(--border); background: var(--secondary); }
.mini-icon {
  width: auto;
  height: auto;
  color: var(--primary);
  background: transparent;
  font-size: 22px;
  line-height: .7;
}
.safety-card .shield, .human-art-note > span { color: var(--primary-foreground); background: var(--primary); }
.tag-row button, .profile-tags span, .result-tags span { border-radius: 3px; color: var(--secondary-foreground); background: var(--secondary); }
.text-button, .back-link, .artist-social-link { color: var(--primary); }

/* Recherche : un panneau de consultation, pas une barre de produit SaaS. */
.search-hero { padding-bottom: 44px; }
.big-search { border-color: var(--border); border-radius: 7px; background: var(--card); box-shadow: var(--shadow-sm-ui); }
.big-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.big-search button { border-radius: 5px; }
.popular-searches, .range-values, .check, .radio, .results-top p { color: var(--muted-foreground); }
.popular-searches button { color: var(--primary); }
.filters, .results-top { border-color: var(--border); }
.filter-chips button { border-color: var(--border); border-radius: 4px; color: var(--muted-foreground); background: transparent; }
.filter-chips button.selected { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }
.check > span, .radio > span { border-color: var(--input); background: transparent; }
.check input:checked + span { border-color: var(--primary); background: var(--primary); }
.artist-result { overflow: hidden; }
.result-art::before {
  content: "portfolio";
  top: 10px;
  left: 10px;
  padding: 3px 5px;
  border: 1px solid rgba(255,253,248,.42);
  border-radius: 3px;
  color: #fffdf8;
  background: rgba(31, 25, 22, .42);
  font-family: "DM Sans", ui-sans-serif, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.result-info { background: var(--card); }
.result-artist b, .result-info h3, .result-price { color: var(--card-foreground); }
.result-artist small, .result-meta { color: var(--muted-foreground); }
.availability { color: var(--primary); }
.empty-results {
  grid-column: 1 / -1;
  padding: 42px 24px;
  border: 1px dashed var(--input);
  border-radius: 8px;
  color: var(--muted-foreground);
  background: var(--secondary);
  text-align: center;
}
.empty-results h2 { margin: 0 0 7px; color: var(--card-foreground); font-size: 26px; }
.empty-results p { margin: 0; font-size: 13px; }

/* Profils, commandes, messages et modales. */
.artist-cover { border-color: var(--border); border-radius: 8px; background: linear-gradient(115deg, #e96f70, #b86caf 47%, #3d73c8); }
.artist-cover::before, .artist-cover::after { display: none; }
.artist-cover span { display: none; }
/* Les chevrons des filtres indiquent toujours l'état réel de la section. */
.filters summary > span {
  display: inline-block;
  line-height: 1;
  transform-origin: center;
  transition: transform .16s ease;
}
.filters details[open] > summary > span { transform: rotate(180deg); }
/* L'avatar peut déborder sur la bannière ; le nom, lui, reste toujours dans
   sa zone de lecture sous la bannière. */
.artist-profile-head {
  position: relative;
  display: grid;
  grid-template-columns: 91px minmax(0, 1fr) auto;
  align-items: start;
  gap: 17px;
  margin: 0 29px 24px;
  padding-top: 18px;
}
.artist-profile-head .profile-avatar {
  position: absolute;
  top: -47px;
  left: 0;
}
.artist-identity { grid-column: 2; min-width: 0; }
.profile-actions { grid-column: 3; margin-left: 0; }
.verified { color: var(--primary-foreground); background: var(--primary); }
.handle, .artist-info, .order-info p, .page-header p:last-child, .artist-panel-intro, .artist-commission p, .artist-review p { color: var(--muted-foreground); }
.info-line { color: var(--card-foreground); }
.profile-tabs button, .order-tabs button { color: var(--muted-foreground); }
.profile-tabs button.active, .order-tabs button.active { color: var(--foreground); border-color: var(--primary); }
.profile-tabs b, .order-tabs b { border-radius: 3px; color: var(--secondary-foreground); background: var(--secondary); }
.portfolio-card, .artist-commission, .artist-review, .commission-option { border-color: var(--border); border-radius: 7px; background: var(--card); }
.commission-option.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  box-shadow: inset 0 0 0 1px var(--primary);
}
.artist-commission > strong, .commission-option strong, .pricing-kicker, .summary-kicker { color: var(--primary); }
.artist-pricing { border-color: var(--border); border-radius: 7px; background: var(--secondary); }
.pricing-row { border-color: color-mix(in srgb, var(--border) 82%, transparent); color: var(--card-foreground); }
.status { border-radius: 3px; }
.status.progress { color: var(--primary-foreground); background: var(--primary); }
.status.pending { color: #fffdf8; background: var(--destructive); }
.progress-track { background: var(--secondary); }
.progress-track span { background: var(--primary); }
.messages-layout { border-color: var(--border); border-radius: 8px; background: var(--card); }
.message-search, .order-context { border-radius: 6px; background: var(--secondary); }
.conversation { border-radius: 5px; color: var(--foreground); }
.conversation:hover { background: var(--secondary); }
.conversation.active { color: var(--foreground); background: var(--accent); border-left-color: var(--primary); }
.conversation.active small, .conversation.active time { color: var(--muted-foreground); }
.chat-panel, .chat-compose { background: var(--card); }
.chat-head .chat-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: 0;
  padding: 5px 7px;
  border-radius: 5px;
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}
.chat-head .chat-profile-link:hover { background: var(--secondary); }
.chat-head .chat-profile-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat-head .chat-profile-link > span:last-child { min-width: 0; }
.chat-head > [data-action="conversation-options"] { margin-left: auto; }
.chat-head > [data-action="conversation-options"].is-muted { position: relative; color: var(--primary); }
.chat-head > [data-action="conversation-options"].is-muted::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.chat-head > [data-action="toggle-block-counterpart"] { margin-left: auto; }
.chat-head > [data-action="toggle-block-counterpart"].is-blocked { color: #c0435a; }
.chat-head > [data-action="conversation-options"] { margin-left: 0; }
.chat-back { display: none; }
.chat-head small i { background: var(--primary); }
.bubble { border-radius: 7px 7px 7px 2px; color: var(--card-foreground); background: var(--secondary); }
.bubble.mine { border-radius: 7px 7px 2px 7px; color: var(--primary-foreground); background: var(--primary); }
.chat-compose button, .chat-compose .send-button { border-radius: 5px; color: var(--primary-foreground); background: var(--primary); }
.chat-attachment-preview { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--foreground); background: var(--secondary); }
.chat-attachment-preview button { margin-left: auto; border: none; background: none; color: var(--muted-foreground); cursor: pointer; font-size: 15px; line-height: 1; }
.chat-attachment-bubble { padding: 6px; }
.chat-attachment-link { display: block; color: inherit; text-decoration: none; }
.chat-attachment-file { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; }
.chat-attachment-image { display: block; max-width: 220px; max-height: 220px; border-radius: 5px; object-fit: cover; }
.modal-backdrop { background: rgba(32, 26, 22, .68); backdrop-filter: none; }
.modal { border-color: var(--border); border-radius: 9px; color: var(--popover-foreground); background: var(--popover); box-shadow: 0 24px 70px rgba(25, 19, 15, .24); }
.modal-close {
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--primary-foreground);
  background: var(--primary);
}
.upload-drop { border-color: var(--input); border-radius: 7px; background: var(--secondary); }
.publish-guideline { border-color: var(--border); border-radius: 6px; background: var(--secondary); }
.auth-language-toggle { position: absolute; top: 54px; right: 17px; margin-top: 0; padding: 0; border: 0; background: transparent; color: var(--muted-foreground); font-size: 11px; font-weight: 700; text-align: right; }
.auth-language-toggle:hover { color: var(--primary); text-decoration: underline; }
.toast { border-radius: 6px; color: #fffdf8; background: #302820; box-shadow: 0 10px 28px rgba(25, 19, 15, .2); }

/* Espaces créateur : même langage qu'une vitrine, sans dégradé bleu agressif. */
.creator-cover { border-color: var(--border); border-radius: 8px; background: linear-gradient(112deg, #d94f68, #a85fbe 48%, #2772c4); }
.creator-cover::before, .creator-cover::after { display: none; }
.creator-cover span { display: none; }
.card-kicker .mini-icon { border-radius: 0; color: var(--primary); background: transparent; }
.completion-track { border-radius: 2px; background: var(--secondary); }
.completion-track span { border-radius: inherit; background: var(--primary); }
.creator-work { border-color: rgba(255,253,248,.35); border-radius: 7px; }
.creator-work .work-label, .creator-work > button { border-radius: 3px; }
.request-status { border-radius: 3px; color: var(--primary-foreground); background: var(--primary); }

/* Les aperçus de démo deviennent des pigments sourds, pas une palette de néons. */
.art-aurora { background: linear-gradient(180deg, rgba(43, 25, 44, .08), rgba(24, 18, 16, .36)), url("https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&w=1200&q=88") center / cover no-repeat !important; }
.art-poppy { background: linear-gradient(180deg, rgba(83, 20, 45, .04), rgba(24, 18, 16, .38)), url("https://images.unsplash.com/photo-1547891654-e66ed7ebb968?auto=format&fit=crop&w=1200&q=88") center / cover no-repeat !important; }
.art-bluebell { background: linear-gradient(180deg, rgba(29, 42, 86, .05), rgba(18, 20, 31, .38)), url("https://images.unsplash.com/photo-1541961017774-22349e4a1262?auto=format&fit=crop&w=1200&q=88") center / cover no-repeat !important; }
.art-garden { background: linear-gradient(180deg, rgba(64, 34, 74, .04), rgba(20, 18, 16, .38)), url("https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?auto=format&fit=crop&w=1200&q=88") center / cover no-repeat !important; }
.art-sunset { background: linear-gradient(180deg, rgba(90, 38, 31, .03), rgba(28, 19, 16, .4)), url("https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&w=1200&q=88") 75% center / cover no-repeat !important; }
.art-lilac { background: linear-gradient(180deg, rgba(67, 36, 84, .05), rgba(20, 18, 26, .38)), url("https://images.unsplash.com/photo-1545987796-200677ee1011?auto=format&fit=crop&w=1200&q=88") center / cover no-repeat !important; }
.art-aurora::before, .art-poppy::before, .art-bluebell::before, .art-garden::before, .art-sunset::before, .art-lilac::before { display: none !important; }
.art-aurora::after, .art-poppy::after, .art-bluebell::after, .art-garden::after, .art-sunset::after, .art-lilac::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(25, 18, 15, .24));
  box-shadow: none;
  mix-blend-mode: normal;
  pointer-events: none;
  transform: none;
}

body.dark .sidebar { background: var(--sidebar-ui); }
body.dark .nav-link.active { color: var(--foreground); background: var(--accent); }
body.dark .mini-card, body.dark .artist-result, body.dark .order-card, body.dark .creator-dash > section, body.dark .messages-layout, body.dark .modal, body.dark .big-search, body.dark .profile-pill, body.dark .round-button, body.dark .secondary-button, body.dark .commission-option, body.dark .filter-chips button { background: var(--card); }
/* Cette règle de surface est volontairement générale : on redéclare donc les
   survols interactifs juste après, pour qu'ils gardent leur contraste. */
body.dark .secondary-button:hover,
body.dark .round-button:hover {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}
body.dark .primary-button:hover,
body.dark .big-search button:hover,
body.dark .create-button:hover {
  color: var(--primary-foreground);
  background: var(--foreground);
}
body.dark .match-card, body.dark .safety-card, body.dark .message-search, body.dark .order-context, body.dark .artist-pricing, body.dark .publish-guideline { background: var(--secondary); }
body.dark .filter-chips button.selected {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}
body.dark .commission-option.selected {
  border-color: var(--primary);
  color: var(--foreground);
  background: color-mix(in srgb, var(--primary) 13%, var(--card));
}
body.dark .chat-compose, body.dark .chat-compose input { color: var(--foreground); background: var(--card); }
body.dark .bubble.other { color: var(--card-foreground); background: var(--secondary); }
body.dark .upload-drop { background: var(--secondary); }
/* Le sélecteur du thème clair est plus spécifique que .bubble.mine dans la
   palette importée : on redéclare donc explicitement la bulle envoyée. */
body:not(.dark) .bubble.mine {
  color: var(--primary-foreground);
  background: var(--primary);
}
body:not(.dark) .bubble.mine time {
  color: color-mix(in srgb, var(--primary-foreground) 74%, transparent);
}

@media (max-width: 780px) {
  .sidebar, body.dark .sidebar { background: color-mix(in srgb, var(--sidebar-ui) 94%, transparent); border-color: var(--border); backdrop-filter: blur(12px); }
  .sidebar-header, .sidebar-toggle { display: none; }
  .sidebar.is-collapsed { width: 100%; height: 63px; padding: 7px 11px; }
  .sidebar.is-collapsed .main-nav { gap: 0; margin: 0; }
  .sidebar.is-collapsed .nav-link { gap: 0; padding: 2px 0; font-size: 9px; }
  .sidebar.is-collapsed .nav-link .nav-icon { width: 19px; height: 19px; }
  .sidebar.is-collapsed .nav-link b { display: block; }
  .sidebar.is-collapsed ~ main { width: 100%; margin-left: 0; }
  .nav-link { border-radius: 5px; }
  .nav-link.active { box-shadow: inset 0 -2px 0 var(--primary); }
  .nav-link .nav-icon { width: 19px; height: 19px; }
  .feed-scroller { border-radius: 7px; }
  .modal { border-radius: 8px; }
  .artist-profile-head {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 11px;
    margin: 0 0 24px;
    padding-top: 13px;
  }
  .artist-profile-head .profile-avatar { top: -38px; }
  .artist-identity { grid-column: 2; }
  .profile-actions { grid-column: 1 / -1; width: 100%; margin: 5px 0 0; }
}

/* Mobile : une interface pensée pour le pouce, sans héritage de mise en page
   bureau. Les éléments denses passent en pile ou en défilement horizontal. */
.mobile-filter-toggle { display: none; }

@media (max-width: 780px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  main, .view, .artist-main, .creator-main, .results-panel, .chat-panel { min-width: 0; }
  .view {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    padding: 22px 16px calc(94px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }
  h1 { font-size: clamp(29px, 9vw, 36px); line-height: 1; }
  .eyebrow { margin-bottom: 6px; font-size: 9px; }
  .challenge-home-banner { min-height: 236px; max-height: 236px; margin-top: 16px; padding: 24px 20px; border-radius: 16px; }
  .challenge-home-banner.is-empty { min-height: 0; max-height: 0; }
  .challenge-home-banner-content h2 { font-size: 24px; }
  .challenge-home-banner-content p { font-size: 14px; }
  .challenge-home-banner-content .primary-button { width: 100%; }

  /* Barre de navigation : des icônes seulement, lisibles et sans textes écrasés. */
  .sidebar, .sidebar.is-collapsed {
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    overflow: visible;
  }
  .sidebar .main-nav, .sidebar.is-collapsed .main-nav { height: 52px; gap: 0; margin: 0; }
  .sidebar .nav-link, .sidebar.is-collapsed .nav-link {
    position: relative;
    display: grid;
    place-items: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 0;
    gap: 0;
    border-radius: 6px;
    font-size: 0;
  }
  .sidebar .nav-link .nav-icon, .sidebar.is-collapsed .nav-link .nav-icon { width: 21px; height: 21px; }
  .sidebar .nav-link b, .sidebar.is-collapsed .nav-link b {
    position: absolute;
    top: 3px;
    right: calc(50% - 19px);
    display: grid;
    min-width: 15px;
    margin: 0;
    padding: 2px 4px;
    place-items: center;
    font-size: 8px;
    line-height: 1;
  }
  .sidebar .nav-link.active { box-shadow: inset 0 -2px 0 var(--primary); }
  .sidebar .mobile-profile-link, .sidebar.is-collapsed .mobile-profile-link { display: grid; }
  .sidebar-bottom, .sidebar.is-collapsed .sidebar-bottom { display: none; }

  /* En-têtes et actions : aucun bouton ne chevauche un titre. */
  .topbar, .page-header, .messages-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }
  .topbar > div:first-child, .page-header > div:first-child, .messages-header > div:first-child { min-width: 0; }
  .top-actions { flex: 0 0 auto; margin-left: auto; gap: 7px; }
  .round-button { width: 38px; height: 38px; }
  .page-header { padding-bottom: 20px; }
  .page-header > p:last-child { width: 100%; max-width: none; margin: 0; line-height: 1.45; }

  /* Découverte : même rangée qui s'étend sur plusieurs lignes qu'en desktop
     (voir .feed-switch plus haut) plutôt qu'un scroll horizontal — un scroll
     est peu visible sur mobile, un simple retour à la ligne montre toutes les
     catégories déjà révélées sans geste caché à découvrir. */
  /* overflow-x:visible annule l'ancien scroll horizontal posé par la feuille de
     base (voir plus haut, media 780px, .feed-switch { overflow-x: auto }) —
     sans ça, les catégories révélées par "+" resteraient coupées au lieu de
     passer à la ligne. */
  .feed-switch { min-height: 46px; margin-top: 17px; overflow-x: visible; }
  .conversation-list::-webkit-scrollbar { display: none; }
  .feed-tab { height: 32px; margin: 0 18px 10px 0; padding: 0 0 8px; white-space: nowrap; font-size: 12px; }
  .feed-more { height: 32px; margin: 0 0 10px; }
  .feed-status { display: none; }
  .feed-layout { display: block; padding-top: 17px; }
  .feed-scroller {
    height: min(590px, calc(100svh - 223px));
    min-height: 470px;
    border-radius: 7px;
  }
  .feed-post { height: min(590px, calc(100svh - 223px)); min-height: 470px; }
  .post-overlay { left: 14px; right: 14px; }
  .post-overlay.top { top: 14px; }
  .post-overlay.bottom { right: 72px; bottom: 16px; gap: 8px; }
  .post-caption strong { font-size: 21px; line-height: 1.04; }
  .post-caption span { font-size: 10px; line-height: 1.35; }
  .artist-chip .avatar { width: 34px; height: 34px; }
  .artist-chip b { font-size: 12px; }
  .artist-chip small { font-size: 10px; }
  .post-actions { right: 14px; bottom: 16px; flex-direction: column; gap: 6px; }
  .post-action { width: 36px; height: 36px; justify-content: center; padding: 0; }
  .post-action > b { display: none; }
  .post-action .save-icon { width: 16px; height: 16px; }
  .next-art { left: 14px; bottom: 16px; transform: none; }
  .scroll-cue { display: none; }
  .feed-aside { grid-template-columns: 1fr; gap: 12px; margin-top: 13px; }
  .mini-card { padding: 16px; }

  /* Recherche et filtres. */
  .search-hero { padding: 0 0 26px; text-align: left; }
  .search-hero h1 { margin-bottom: 20px; }
  .big-search { height: 52px; padding-left: 12px; border-radius: 7px; }
  .big-search > span { font-size: 19px; }
  .big-search input { padding: 0 9px; font-size: 14px; }
  .big-search button { height: 38px; margin-right: 6px; padding: 0 11px; border-radius: 5px; font-size: 11px; }
  .popular-searches { justify-content: flex-start; gap: 6px 10px; font-size: 10px; text-align: left; }
  .search-content { display: block; }
  .filters { display: none; margin: 0 0 15px; padding: 0 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
  .filters.is-mobile-open { display: block; }
  .filter-heading { margin-top: 14px; }
  .mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--foreground);
    background: var(--card);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
  }
  .mobile-filter-toggle[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }
  .results-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
  .results-top p { min-width: 0; font-size: 12px; line-height: 1.4; }
  .sort-select { grid-column: 1 / -1; justify-self: start; }
  .artist-grid { grid-template-columns: 1fr; gap: 12px; }
  .result-art { height: 180px; }
  .result-info { padding: 13px; }

  /* Profils artiste et commandes. */
  .back-link { margin-bottom: 14px; }
  .artist-cover { height: 142px; border-radius: 7px; }
  .artist-profile-head { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin: 0 0 20px; padding-top: 14px; }
  .artist-profile-head .profile-avatar { top: -37px; width: 72px; height: 72px; font-size: 31px; }
  .artist-profile-head h1 { font-size: 29px; line-height: .98; }
  .artist-identity { min-width: 0; }
  .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .profile-actions button { min-width: 0; padding: 0 8px; font-size: 11px; white-space: nowrap; }
  .artist-body { display: block; margin: 0; }
  .artist-info { margin-bottom: 20px; }
  .profile-tabs, .order-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .profile-tabs button, .order-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
  .portfolio-card { min-height: 150px; }
  .artist-commission { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; padding: 9px; }
  .artist-commission .secondary-button { grid-column: 2 / -1; width: 100%; }

  .order-tabs { height: 54px; margin: 0 -16px; padding: 0 16px; }
  .order-tabs button { font-size: 12px; }
  .order-card, .order-card.compact { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .order-art, .compact .order-art { width: 72px; height: 72px; }
  .order-info { min-width: 0; }
  .order-info h2 { font-size: 20px; line-height: 1; }
  .order-info p { line-height: 1.4; }
  .progress-steps { gap: 12px; font-size: 9px; }
  .order-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; width: 100%; margin: 0; gap: 4px 10px; }
  .order-side .secondary-button { grid-column: 1 / -1; width: 100%; margin: 5px 0 0; }

  /* Messagerie : comme une app mobile, liste puis discussion plein écran. */
  .messages-layout { display: grid; grid-template-columns: 1fr; height: auto; min-height: 0; overflow: visible; }
  .conversation-list {
    display: grid;
    gap: 2px;
    padding: 10px;
    overflow: visible;
    border: 0;
  }
  .message-search { display: flex; }
  .conversation { min-width: 0; padding: 12px 9px; border-left: 2px solid transparent; }
  .conversation small { max-width: none; }
  .conversation time { display: block; }
  .messages-view:not(.mobile-chat-open) .chat-panel { display: none; }
  .messages-view.mobile-chat-open .conversation-list { display: none; }
  .messages-view.mobile-chat-open .messages-layout { display: block; }
  .chat-panel { min-height: 460px; }
  .chat-head { height: 62px; padding: 0 12px; }
  .chat-head .chat-profile-link { max-width: calc(100% - 84px); padding: 5px; }
  .chat-profile-link > span:last-child { overflow: hidden; }
  .chat-profile-link b, .chat-profile-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-back { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin: 0 !important; padding: 0; border: 1px solid var(--border) !important; border-radius: 5px; color: var(--foreground) !important; background: var(--secondary) !important; }
  .chat-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .order-context { margin: 10px 12px 0; padding: 8px; }
  .order-context > span:nth-child(2) { min-width: 0; }
  .order-context em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order-context button { flex: 0 0 auto; }
  .chat-log { padding: 18px 12px; }
  .bubble { max-width: 82%; font-size: 11px; }
  .chat-compose { gap: 7px; padding: 10px 12px; }
  .chat-compose input { min-width: 0; }

  /* Inspirations et espace créateur. */
  .collection-row { grid-template-columns: 1fr; gap: 11px; padding-top: 16px; }
  .collection { min-height: 180px; }
  .creator-profile { padding-top: 0; }
  .creator-cover { height: 132px; border-radius: 7px; }
  .creator-profile-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin: 0 0 20px; padding-top: 14px; }
  .creator-avatar { position: absolute; top: -37px; left: 0; width: 72px; height: 72px; font-size: 31px; }
  .creator-profile-head > div:not(.profile-actions) { grid-column: 2; min-width: 0; }
  .creator-profile-head h1 { font-size: 29px; line-height: .98; }
  .creator-profile-head .profile-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; margin: 5px 0 0; }
  .creator-profile-head .profile-actions button { min-width: 0; padding: 0 8px; font-size: 10px; white-space: nowrap; }
  .creator-workspace { gap: 18px; margin: 0; }
  .creator-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .creator-metrics article { min-width: 0; min-height: 104px; padding: 10px; }
  .creator-metrics span, .creator-metrics small { overflow-wrap: anywhere; font-size: 9px; line-height: 1.25; }
  .creator-metrics b { margin-top: 12px; font-size: 23px; }
  .creator-section-heading { align-items: flex-end; gap: 10px; }
  .creator-section-heading .text-button { flex: 0 0 auto; margin-top: 0; font-size: 11px; }
  .creator-request-list article { grid-template-columns: 34px minmax(0, 1fr) auto; }

  /* Fenêtres : elles restent toujours dans l'écran, même avec le clavier ouvert. */
  .modal-backdrop { align-items: end; padding: 12px; }
  .modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 23px 16px 18px;
    border-radius: 8px 8px 6px 6px;
  }
  .modal h2 { padding-right: 34px; font-size: 28px; line-height: 1; }
  .modal-close { top: 10px; right: 10px; }
  .commission-option { align-items: flex-start; gap: 9px; padding: 9px; }
  .commission-option > span:nth-child(2) { min-width: 0; }
  .commission-option small { line-height: 1.35; }
  .order-price-summary { padding: 11px; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* --- 6/6 : brand-system.css --- */
/*
  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;
  display: block;
  object-fit: contain;
  object-position: center;
}
/* Badge "Beta" discret pendant le pilote (cf. synthèse produit du 1er août :
   annoncer une phase de construction sans peser sur l'identité visuelle). */
.beta-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 20px;
  vertical-align: middle;
  color: var(--muted-foreground);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: default;
}
.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; }
/* Taille réelle en réduit définie plus bas (52px + scale, cf. "Barre réduite") :
   cette règle-ci était systématiquement écrasée par celle-là (même spécificité,
   plus tard dans le fichier) et n'avait donc jamais eu d'effet — supprimée pour
   ne pas laisser une valeur morte qui donne l'illusion d'un contrôle sur la taille. */

/* 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; }

/* Les liens de navigation principaux sont de vraies ancres (URL réelle, ouverture
   dans un nouvel onglet possible) : on retire le style de lien texte par défaut. */
.nav-link { text-decoration: none; }
/* .nav-link { display: flex } (styles.css) écrase le display:none natif de l'attribut
   hidden — sans ça, le lien Modération reste visible pour tout le monde. */
.nav-link[hidden] { display: none; }

/* 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,
.shield,
.human-art-note > span { background: var(--primary); }
/* .mini-icon (hors .card-kicker) est un simple glyphe transparent (cf. gallery-direction.css) :
   l'inclure ici lui donnait un fond identique à sa couleur de texte (var(--primary) sur les deux),
   rendant le caractère invisible dans .mini-card-title (page d'accueil, carte "Ton style du moment"). */

/* 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; }
/* .page-header est un flex row sans wrap : avec beaucoup de texte (ex. la page
   "devenir artiste", qui a deux paragraphes de notes au lieu d'un), les enfants
   se compriment au lieu de passer à la ligne et l'eyebrow finit écrasé sur
   plusieurs lignes verticales illisibles. On autorise le retour à la ligne et on
   empêche l'eyebrow (toujours court par design) de rétrécir. */
.page-header { flex-wrap: wrap; gap: 6px 20px; }
.page-header > .eyebrow { flex: 0 0 auto; white-space: nowrap; }
.page-header-notes { display: flex; flex-direction: column; gap: 4px; }
.page-header-notes p { color: var(--muted-foreground); margin: 0; }
.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 { position: relative; color: var(--foreground); }
#notification-dot { position: absolute; top: 1px; right: 1px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; box-shadow: 0 0 0 2px var(--card); background: var(--destructive); color: white; font-size: 9px; font-weight: 800; line-height: 1; }
#notification-dot[hidden] { display: none; }
.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);
  --stat-growth: #2f7d4f;
  --stat-growth-bg: #e3f1e7;
  --stat-money: #a3690f;
  --stat-money-bg: #f5ead2;
  --stat-moderation: #b04a4a;
  --stat-moderation-bg: #f6e2e2;
}

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;
  --stat-growth: #6fcf97;
  --stat-growth-bg: #1c3324;
  --stat-money: #e0ac57;
  --stat-money-bg: #3a2c14;
  --stat-moderation: #ee8a73;
  --stat-moderation-bg: #3a2320;
}

/* Bug corrigé (rapport Cloudflare Web Analytics du 02/09, CLS 100% "Mauvais" sur
   #app-sidebar>div.sidebar-header>a.brand>img.brand-symbol) : cette règle, sans
   sélecteur qualifiant, avait la même spécificité que celle de "Règle 1" plus haut
   (29px) mais arrivait après elle dans le fichier — elle gagnait donc silencieusement
   la cascade et le logo s'affichait à 50px au lieu des 29px prévus par le design.
   Supprimée ; les tailles voulues (29px en barre ouverte, 52px+scale en barre
   réduite) sont maintenant les seules déclarations actives. */

/* 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: 52px;
  height: 52px;
  transform: scale(1.24);
  transform-origin: center;
}
.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) .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; }
/* Sans ce correctif, un <label> masqué avec l'attribut hidden (ex. la date de
   réouverture, cachée sauf si disponibilité = "En pause") reste visible : la règle
   ci-dessus ([data-profile-form] label, spécificité 0-1-1) l'emporte sur le
   [hidden] { display: none } natif du navigateur (spécificité 0-1-0). Même famille
   de bug que .publish-modal-content label documentée plus haut dans ce fichier. */
[data-profile-form] label[hidden] { display: none; }
[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; }
/* #commission-preferences-form reprend exactement l'apparence de [data-profile-form]
   ci-dessus (même panneau de paramètres, juste en dessous) SANS porter l'attribut
   data-profile-form : ce formulaire a son propre gestionnaire de soumission
   (saveCommissionPreferences), et [data-profile-form] est aussi capté par un
   listener global délégué (saveProfile) — porter l'attribut déclencherait les deux
   à la fois sur les mauvais champs. */
#commission-preferences-form { display: grid; gap: 14px; }
#commission-preferences-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
#commission-preferences-form label > small { color: var(--muted-foreground); font-size: 10px; font-weight: 500; line-height: 1.4; }
#commission-preferences-form input,
#commission-preferences-form select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--card); font: inherit; }
#commission-preferences-form input:focus,
#commission-preferences-form select:focus { border-color: var(--brand-sky); outline: 2px solid color-mix(in srgb, var(--brand-sky) 28%, transparent); outline-offset: 1px; }
.profile-check { display: flex; align-items: flex-start; gap: 9px; color: var(--muted-foreground); font-weight: 500; line-height: 1.4; }
.profile-check input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--brand-blue); }
.profile-check[hidden] { display: none; }
/* Cases "art humain" / "titularité des droits" (Publier) : ".publish-modal-content
   label" (display: block) bat ".profile-check" (display: flex) en spécificité, ce
   qui empilait la case à cocher AU-DESSUS du texte au lieu de la mettre à côté. */
.publish-modal-content label.profile-check { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; color: var(--muted); font-size: 12px; font-weight: 500; }
/* Aperçu tarifaire en direct dans la modale de devis : l'artiste voit son net et le
   total acheteur avant d'envoyer, plutôt que de les découvrir après coup. */
.quote-pricing-preview { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.quote-pricing-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quote-pricing-row + .quote-pricing-row { margin-top: 4px; }
.quote-pricing-row span { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.quote-pricing-row b { color: var(--card-foreground); font-size: 16px; font-weight: 700; }
.quote-pricing-row.is-artist b { color: var(--brand-blue); }
.quote-pricing-row.is-buyer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Offre fondateurs : présentation en paires libellé/valeur plutôt qu'en paragraphe
   dense — les conditions (durée, taux après, obligations) étaient auparavant noyées
   dans un bloc de texte que personne ne lit jusqu'au bout. */
.artist-pitch-lead { font-size: 15px; line-height: 1.6; }
.offer-breakdown { margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.offer-breakdown > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.offer-breakdown > div:last-child { padding-bottom: 0; border-bottom: none; }
.offer-breakdown dt { flex: 0 0 auto; min-width: 170px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.offer-breakdown dd { flex: 1 1 200px; margin: 0; color: var(--card-foreground); font-size: 14px; font-weight: 600; line-height: 1.5; }
.offer-conditions { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.6; }

/* Champ mot de passe avec bouton afficher/masquer. Le padding droit de l'input
   réserve la place du bouton pour que le texte ne passe jamais dessous. */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 44px; }
.password-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 8px; background: transparent;
  color: var(--muted-foreground); cursor: pointer;
}
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
.password-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.legal-update-item { padding: 14px 15px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.legal-update-item b { display: block; margin-bottom: 6px; color: var(--card-foreground); font-size: 14px; }
.legal-update-item p { margin: 0 0 8px; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
.legal-update-item a { color: var(--primary); font-size: 13px; font-weight: 600; }
.legal-update-decline { display: block; margin: 12px auto 0; color: var(--muted-foreground); font-size: 12px; }
.publish-rights-check { margin-top: 14px; font-size: 13px; }
.publish-rights-check input { margin-top: 2px; }
.artwork-marketing-consent { margin-top: 14px; font-size: 11px; }

/* Espace commande unifié : brief initial repliable directement dans le fil de
   conversation, au lieu d'une fenêtre séparée à ouvrir depuis la liste des
   commandes (qui reste aussi accessible telle quelle par ailleurs). */
.chat-brief-panel { margin: 10px 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--secondary); }
.chat-brief-panel[hidden] { display: none; }
.chat-brief-panel summary { display: flex; align-items: center; justify-content: space-between; color: var(--foreground); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.chat-brief-panel summary::-webkit-details-marker { display: none; }
.chat-brief-panel summary::after { content: "Afficher ▾"; color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.chat-brief-panel[open] summary::after { content: "Masquer ▴"; }
.chat-brief-panel .brief-preview { margin: 10px 0 0; padding: 0; border: 0; background: transparent; }

/* Commande cadeau : tag sur la carte de commande, encart sur le brief détaillé. */
.gift-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 20px; color: #7a2f5c; background: #ffe0f0; font-size: 10px; font-weight: 700; vertical-align: middle; }
.order-gift-toggle { margin: 4px 0; }
.order-gift-fields { display: grid; gap: 12px; margin-bottom: 4px; }
.order-gift-fields[hidden] { display: none; }
.brief-preview .gift-note, #admin-order-thread-meta .gift-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #fff0f8; color: #7a2f5c; font-size: 12px; }

/* Brief guidé par questionnaire : le brief assemblé contient des retours à la
   ligne (sujet/style/références/usage) qu'il faut préserver à l'affichage,
   sinon <p> les aplatit en un seul bloc illisible. */
.brief-preview p, #admin-order-thread-meta p { white-space: pre-line; }

/* Centre de ressources artistes : guides, FAQ, modèles. */
.resources-section { margin-top: 8px; margin-bottom: 32px; }
.resources-section h2 { margin: 0 0 14px; color: var(--foreground); font-family: "Fraunces", serif; font-size: 20px; }
.resource-card { padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.resource-card h3 { margin: 0 0 8px; color: var(--card-foreground); font-size: 14px; }
.resource-card p { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.resource-card > a { display: inline-block; margin-top: 10px; color: var(--primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.resource-card > a:hover { text-decoration: underline; }
.resource-template p { font-style: italic; }
.resource-faq { padding: 14px 0; border-bottom: 1px solid var(--border); }
.resource-faq summary { display: flex; justify-content: space-between; align-items: center; color: var(--foreground); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.resource-faq summary::-webkit-details-marker { display: none; }
.resource-faq summary::after { content: "+"; margin-left: 12px; color: var(--muted-foreground); font-size: 16px; }
.resource-faq[open] summary::after { content: "−"; }
.resource-faq p { margin: 10px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.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); }
.artist-profile-fields[hidden] { display: none; }
.onboarding-modal-content { max-height: min(780px, calc(100dvh - 32px)); overflow-y: auto; }

/* Modale "Paramètres" : barre latérale de menus (Général / Compte / Confidentialité /
   Facturation) sur le même principe que la modale de paramètres de Claude. Chaque menu peut
   contenir plusieurs sections empilées (ex. Général > Profil, Profil artiste, Préférences,
   Notifications) — le contenu du formulaire de profil ne change pas, seule la présentation
   avec navigation latérale change. */
/* height (pas max-height) : la modale garde toujours la meme taille, que
   l'onglet actif (General, Facturation...) ait beaucoup ou peu de contenu ;
   c'est .settings-content qui defile en interne si besoin. */
.edit-profile-modal-content.settings-modal-content { width: min(760px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.settings-shell { display: flex; align-items: flex-start; gap: 26px; margin-top: 18px; flex: 1; min-height: 0; }
.settings-nav { display: flex; flex: 0 0 152px; flex-direction: column; gap: 2px; }
.settings-nav button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; color: var(--muted-foreground); background: transparent; font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.settings-nav button[hidden] { display: none; }
.settings-nav button:hover { background: var(--secondary); }
.settings-nav button.active { color: var(--primary-foreground); background: var(--primary); }
.settings-nav button i { display: none; font-style: normal; }
.settings-nav-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.settings-nav-icon { flex: 0 0 auto; }
.settings-back { display: none; margin: 0 0 14px; padding: 0; border: 0; color: var(--primary); background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.settings-content { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
.settings-content [data-settings-panel] { display: flex; flex-direction: column; gap: 22px; }
.settings-content [data-settings-panel][hidden] { display: none; }
.settings-section-title { margin: 0; color: var(--card-foreground); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.settings-divider { height: 1px; margin: 0; border: 0; background: var(--border); }
.settings-hint { margin: -10px 0 0; color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Sans ce garde-fou, renderPushToggle() masquait la ligne (.hidden = true) sur les
   navigateurs sans notifications push, mais le display:flex ci-dessus l'affichait
   quand même : un bouton "Activer" cassé apparaissait pour tout le monde. */
.settings-row[hidden] { display: none; }
.settings-row-text b { display: block; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
.settings-row-text small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; line-height: 1.4; }
.settings-toggle-list { display: grid; gap: 12px; }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; cursor: pointer; }
.settings-toggle-row span b { display: block; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
.settings-toggle-row span small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; line-height: 1.4; }
/* Titre du défi dans "Participer au défi en cours" (Publier / Modifier l'œuvre) :
   auparavant du texte brut, sans moyen de voir le brief complet du défi sans
   quitter la modale. Bouton inline plutôt qu'un <a> pour rester cohérent avec
   la navigation SPA (data-route) — stoppé avant d'atteindre le <label> parent
   pour ne pas cocher la case au passage (voir le handler [data-route]). */
.challenge-row-link { padding: 0; border: 0; color: var(--lilac-dark); background: transparent; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body.dark .challenge-row-link { color: var(--brand-sky); }
.settings-toggle-row input[type="checkbox"] { flex-shrink: 0; position: relative; appearance: none; width: 38px; height: 22px; margin: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .15s ease; }
.settings-toggle-row input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.settings-toggle-row input[type="checkbox"]:checked { background: var(--primary); }
.settings-toggle-row input[type="checkbox"]:checked::before { transform: translateX(16px); }
.settings-toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.blocked-users-list { display: grid; gap: 10px; }
.blocked-user-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.blocked-user-row .avatar { flex: 0 0 auto; width: 36px; height: 36px; font-size: 14px; }
.blocked-user-info { min-width: 0; flex: 1; }
.blocked-user-info b { display: block; overflow: hidden; color: var(--card-foreground); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.blocked-user-info span { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; }
.blocked-user-row .secondary-button { flex: 0 0 auto; }
.appearance-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--secondary); }
.appearance-switch button { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color .15s ease; }
.appearance-switch button svg { display: block; }
.appearance-switch button.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
#settings-language-switch button { width: auto; padding: 0 12px; font-size: 11px; font-weight: 700; }
.settings-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--secondary); }
.settings-plan-card b { display: block; color: var(--card-foreground); font-size: 14px; }
.settings-plan-card small { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 11px; }
.settings-plan-card .primary-button, .settings-plan-card .secondary-button { flex: 0 0 auto; white-space: nowrap; }
.settings-invoice-list { display: grid; gap: 8px; }
.settings-invoice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--secondary); }
.settings-invoice-row b { display: block; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
.settings-invoice-row small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; }
.settings-danger-note { padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--destructive); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--destructive) 8%, transparent); color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.settings-danger-note b { color: var(--card-foreground); }
.cover-drop { position: relative; min-height: 92px; overflow: hidden; }
.cover-drop .cover-drop-preview { position: absolute; inset: 0; z-index: 0; }
.cover-drop .cover-drop-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-drop b, .cover-drop small { position: relative; z-index: 1; }
.cover-drop:has(.cover-drop-preview img) { color: white; }
.cover-drop:has(.cover-drop-preview img) small { color: rgba(255,255,255,.85); }
.cover-drop:has(.cover-drop-preview img)::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); }
/* Paramètres sur mobile : liste de sections façon appli (Profil, Compte,
   Confidentialité, Facturation en rangées pleine largeur avec chevron), sur
   le modèle des paramètres de l'appli Claude — plutôt que la barre latérale
   compacte du bureau. Un tap ouvre la section en plein écran avec un bouton
   "‹ Paramètres" pour revenir à la liste (voir setSettingsMobileView côté JS,
   qui bascule .settings-shell[data-mobile-view] entre "list" et "panel").
   Le bureau n'est pas concerné : il continue d'afficher barre latérale +
   contenu côte à côte, quelle que soit la valeur de data-mobile-view. */
@media (max-width: 780px) {
  .settings-shell { flex-direction: column; gap: 0; }
  .settings-nav { flex: none; flex-direction: column; width: 100%; gap: 8px; }
  .settings-nav button { flex: none; padding: 15px 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--card); font-size: 13px; }
  .settings-nav button:hover { background: var(--secondary); }
  .settings-nav button.active { color: var(--card-foreground); background: var(--card); }
  .settings-nav button i { display: inline; color: var(--muted-foreground); font-size: 16px; }
  .settings-shell[data-mobile-view="panel"] .settings-nav { display: none; }
  .settings-shell[data-mobile-view="list"] .settings-content { display: none; }
  .settings-back:not([hidden]) { display: inline-block; }
}
.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; }

/* Squelette de chargement du feed : occupe la même taille qu'un .feed-post réel
   (hérite de height/min-height/overflow/background via la classe .feed-post partagée)
   pour éviter tout décalage de mise en page (CLS) quand les vraies cartes arrivent
   de Supabase et remplacent le contenu de #live-feed. */
.feed-post-skeleton { background: #183845; }
.feed-post-skeleton .skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .03) 70%);
  background-size: 200% 100%;
  animation: feed-skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes feed-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-post-skeleton .skeleton-shimmer { animation: none; }
}

/* Skeleton par vignette (façon YouTube) : posé directement en arrière-plan CSS de
   chaque <img>/<video> de création (classe ajoutée à l'insertion, retirée en JS dès
   que le média a fini de charger — voir le listener "load"/"loadeddata" dans
   src/app.ts). Une fois chargé, le média recouvre entièrement son cadre
   (object-fit: cover) : pas besoin d'élément séparé ni de gérer l'empilement. */
img.media-loading, video.media-loading {
  background-color: #183845;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .03) 70%);
  background-size: 200% 100%;
  animation: feed-skeleton-shimmer 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  img.media-loading, video.media-loading { animation: none; }
}

/* Skeletons génériques réutilisables pour les listes/grilles chargées à la
   demande (onglets admin, défi, commandes, tickets…) : même effet shimmer que
   ci-dessus, générés via skeletonBlocks() dans src/app.ts et posés dans le
   conteneur juste avant le fetch, remplacés par le vrai contenu une fois
   arrivé — même principe que le skeleton statique du feed dans index.html. */
.skeleton-row-block, .skeleton-card-block, .skeleton-chart-block, .skeleton-text-block {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #183845;
}
.skeleton-row-block { height: 56px; margin-bottom: 8px; }
.skeleton-row-block:last-child { margin-bottom: 0; }
.skeleton-card-block { aspect-ratio: 1 / 1; }
.skeleton-chart-block { height: 180px; }
.skeleton-text-block { display: inline-block; width: 140px; height: 14px; border-radius: 4px; vertical-align: middle; }
.skeleton-row-block .skeleton-shimmer,
.skeleton-card-block .skeleton-shimmer,
.skeleton-chart-block .skeleton-shimmer,
.skeleton-text-block .skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .03) 70%);
  background-size: 200% 100%;
  animation: feed-skeleton-shimmer 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-row-block .skeleton-shimmer,
  .skeleton-card-block .skeleton-shimmer,
  .skeleton-chart-block .skeleton-shimmer,
  .skeleton-text-block .skeleton-shimmer { animation: none; }
}
.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; }
.usage-rights-fieldset { display: flex; flex-wrap: wrap; gap: 8px 16px; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.usage-rights-fieldset legend { width: 100%; padding: 0 0 7px; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
.usage-rights-fieldset label.check { flex: 0 0 auto; font-weight: 400; }
.live-order-list { display: grid; gap: 10px; margin-top: 18px; }
/* Sans ce garde-fou, un groupe de commandes vide (.hidden = true quand la section
   n'a aucune commande à afficher) restait un bloc vide visible sur la page : le
   display:grid ci-dessus écrasait le display:none natif de [hidden]. */
.live-order-list[hidden] { display: none; }
.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; }
.queue-position { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: var(--secondary); color: var(--primary); font-size: 10px; font-weight: 700; }
.queue-public-note { color: var(--primary); font-weight: 600; }
.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); }
.admin-audit-row { align-items: flex-start; }
.admin-audit-row b { flex-shrink: 0; white-space: nowrap; }
.admin-audit-meta { display: inline-block; margin-top: 3px; color: var(--muted-foreground); opacity: .8; }
.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; } }
/* #revision-form (Demander une retouche) et #admin-action-form (confirmation
   modération avec motif) : contrairement à tous les autres formulaires de
   l'app, leurs <label>/<textarea> n'étaient dans aucune classe stylée
   (.brief-field, [data-profile-form]...) — ils retombaient donc sur les
   couleurs et la police par défaut du navigateur, complètement déconnectées
   du thème du site (même bug que la Description de "Publier", déjà corrigé).
   Le sélecteur #admin-action-form label[hidden] est nécessaire pour la même
   raison qu'ailleurs dans ce fichier : un sélecteur par id est plus
   spécifique que [hidden] tout seul et l'aurait sinon empêché de masquer le
   champ "Motif" quand il n'est pas requis. */
#revision-form label,
#admin-action-form label { display: grid; gap: 7px; margin: 0 0 14px; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
#admin-action-form label[hidden] { display: none; }
#revision-form textarea,
#admin-action-form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 78px; padding: 10px 12px; border: 1px solid var(--input); border-radius: 9px; outline: 0; resize: vertical; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 12px; line-height: 1.5; }
#revision-form textarea:focus,
#admin-action-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent); }
/* #collection-form (Nouvelle collection) : même bug, son <label>/<input> n'a
   jamais eu de classe stylée. */
#collection-form label { display: grid; gap: 7px; margin: 0 0 14px; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
#collection-form input { display: block; width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid var(--input); border-radius: 9px; outline: 0; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 13px; }
#collection-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent); }

.report-modal-content { width: min(520px, calc(100vw - 32px)); }

.language-modal-content { width: min(360px, calc(100vw - 32px)); }
.language-modal-content h2 { margin: 0 0 16px; font-size: 20px; }
.language-option-list { display: grid; gap: 8px; }
.language-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); color: var(--card-foreground); background: var(--card); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease; }
.language-option:hover { border-color: var(--primary); }
.language-option span { display: block; font-size: 14px; font-weight: 700; }
.language-option span small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; font-weight: 400; }
.language-option-check { flex: 0 0 auto; color: transparent; }
.language-option.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.language-option.active .language-option-check { color: var(--primary); }

.subscription-plans-modal-content { width: min(880px, calc(100vw - 32px)); }
.subscription-period-toggle { display: inline-flex; gap: 2px; margin: 18px 0 22px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--secondary); }
.subscription-period-btn { padding: 8px 16px; border: none; border-radius: 999px; background: transparent; color: var(--secondary-foreground); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
.subscription-period-btn.is-active { background: var(--card); color: var(--card-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.subscription-period-save { margin-left: 4px; color: var(--primary); font-weight: 700; }
.subscription-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.subscription-plan-card { position: relative; display: flex; flex-direction: column; padding: 20px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.subscription-plan-card.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.subscription-plan-card-elite { background: color-mix(in oklch, var(--primary) 6%, var(--card)); }
.subscription-plan-badge { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.subscription-plan-card h3 { margin: 4px 0 6px; color: var(--card-foreground); font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 700; }
.subscription-plan-price { margin: 0 0 4px; color: var(--card-foreground); font-family: "Instrument Serif", Georgia, serif; font-size: 30px; }
.subscription-plan-price small { color: var(--muted-foreground); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 500; }
.subscription-plan-save { margin: 0 0 12px; color: var(--primary); font-size: 11.5px; font-weight: 600; }
.subscription-plan-card ul { flex: 1 1 auto; margin: 0 0 16px; padding-left: 18px; }
.subscription-plan-card li { margin-bottom: 6px; color: var(--card-foreground); font-size: 12.5px; line-height: 1.5; }
.subscription-plan-note { margin: 0; color: var(--muted-foreground); font-size: 12px; text-align: center; }
@media (max-width: 720px) { .subscription-plans-grid { grid-template-columns: 1fr; } }

.commission-board-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 26px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); }
.commission-board-intro p { flex: 1 1 340px; margin: 0; color: var(--secondary-foreground); font-size: 13px; line-height: 1.5; }
.commission-board-section { margin-bottom: 30px; }
.commission-board-section h3 { margin: 0 0 12px; color: var(--foreground); font-family: "DM Sans", sans-serif; font-size: 15px; font-weight: 700; }
.commission-request-list { display: grid; gap: 12px; }
.commission-request-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.commission-request-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.commission-request-head strong { color: var(--card-foreground); font-size: 15px; }
.commission-request-head small { color: var(--muted-foreground); font-size: 12px; }
.commission-request-card > p { margin: 8px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.commission-request-card > small { display: block; margin-top: 6px; color: var(--muted-foreground); font-size: 11.5px; }
.commission-request-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.commission-response-list { display: grid; gap: 8px; margin-top: 12px; }
.commission-response-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--secondary); }
.commission-response-card b { color: var(--secondary-foreground); font-size: 13px; }
.commission-response-card p { margin: 4px 0 0; color: var(--secondary-foreground); font-size: 12.5px; line-height: 1.45; }
.commission-response-card small { color: var(--muted-foreground); font-size: 11.5px; }
.commission-empty-state { margin: 0; padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted-foreground); font-size: 12.5px; text-align: center; }
.commission-empty-state[hidden] { display: none; }
@media (max-width: 780px) { .commission-response-card { flex-direction: column; align-items: flex-start; } .commission-response-card button { width: 100%; } }

/* Support : liste de tickets + fil de messages, même langage visuel que le
   tableau de demandes publiques (commission board) et le chat de commande. */
.support-ticket-list { display: grid; gap: 12px; }
.support-ticket-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; text-align: left; }
.support-ticket-card:hover { border-color: var(--primary); }
.support-ticket-card > div { display: grid; gap: 4px; }
.support-ticket-card b { color: var(--card-foreground); font-size: 15px; }
.support-ticket-card small { color: var(--muted-foreground); font-size: 12px; }
.support-ticket-status { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.support-ticket-status.status-open { color: #7a4a00; background: #ffe3b0; }
.support-ticket-status.status-answered { color: #0a5c36; background: #c9f0da; }
.support-ticket-status.status-closed { color: var(--muted-foreground); background: var(--secondary); }
.support-thread-messages { display: grid; gap: 10px; max-height: 340px; margin: 16px 0; padding-right: 4px; overflow-y: auto; }
.support-message { padding: 10px 14px; border-radius: 7px 7px 7px 2px; color: var(--card-foreground); background: var(--secondary); }
.support-message.support-message-admin { border-radius: 7px 7px 2px 7px; color: var(--primary-foreground); background: var(--primary); margin-left: 10%; }
.support-message-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.support-message-head b { font-size: 12px; }
.support-message-head small { font-size: 11px; opacity: .8; }
.support-message p { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.support-thread-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
@media (max-width: 780px) { .support-ticket-card { flex-direction: column; align-items: flex-start; } .support-message.support-message-admin { margin-left: 0; } }

.content-options-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#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; }
/* Correctif : dans styles.css, la règle ".publish-modal-content label" (icône + tag,
   spécificité plus élevée que ".upload-drop" seule) forçait "display: block" sur la
   zone de dépôt du modal "Publier une œuvre", cassant sa mise en page en colonne
   centrée : le titre et la légende se chevauchaient au lieu de s'empiler. */
.publish-modal-content .upload-drop { display: grid; place-items: center; text-align: center; }
.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; }
/* Champs du formulaire de signalement de contenu : mêmes règles d'empilement que .brief-field
   (le bug d'origine faisait chevaucher les labels "Motif" et "Description" sur mobile car
   ces <label> n'avaient aucune classe de mise en page). */
#content-report-form select, #content-report-form textarea { width: 100%; box-sizing: border-box; min-height: 43px; padding: 10px 12px; border: 1px solid var(--input); border-radius: 5px; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 12px; }
#content-report-form textarea { min-height: 90px; resize: vertical; }
#content-report-form select:focus, #content-report-form textarea:focus { border-color: var(--primary); outline: 2px solid color-mix(in oklch, var(--primary) 16%, 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; flex-wrap: wrap; gap: 8px; }
.moderation-report-head time { margin-left: auto; color: var(--muted-foreground); font-size: 11px; }
.moderation-type-badge { color: var(--card-foreground); background: var(--secondary); }
.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; }
.moderation-report-card .quote-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.moderation-report-card .quote-card-actions .account-danger-button { margin-left: auto; }
@media (max-width: 560px) { .moderation-report-card .quote-card-actions .account-danger-button { margin-left: 0; } }

/* Espace admin : refonte — cartes de stats groupées par thème, mini-graphiques
   SVG (sans dépendance externe), gestion des comptes et filtres sur le journal
   d'audit. Tout est construit avec les tokens de couleur du thème (var(--card),
   var(--border), etc.) pour rester cohérent en mode clair et sombre. */
.admin-tabs b { margin-left: 6px; padding: 1px 7px; border-radius: 20px; color: var(--primary-foreground); background: var(--primary); font-size: 10px; }
.admin-panel { margin-top: 22px; }
.admin-stat-groups { display: grid; gap: 14px; }
.admin-stat-group-title { margin: 0 0 8px; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-stat-hero { padding: 18px 20px; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); }
.admin-stat-hero-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.admin-stat-hero-figure b { font-family: "Fraunces", serif; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; color: inherit; }
.admin-stat-hero-figure span { font-size: 13px; color: inherit; }
.admin-stat-hero-sub { margin: 6px 0 0; font-size: 12px; color: inherit; }
.admin-stat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 14px 18px; border-radius: var(--radius); }
.admin-stat-row.is-growth { background: var(--stat-growth-bg); color: var(--stat-growth); }
.admin-stat-row.is-activity { background: var(--accent); color: var(--primary); }
.admin-stat-row.is-money { background: var(--stat-money-bg); color: var(--stat-money); }
.admin-stat-row.is-moderation { background: var(--stat-moderation-bg); color: var(--stat-moderation); }
.admin-stat-row-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.admin-stat-row-item svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: currentColor; }
.admin-stat-row-item b { display: block; font-family: "Fraunces", serif; font-size: 17px; font-weight: 700; color: inherit; white-space: nowrap; }
.admin-stat-row-item span { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.3; color: inherit; }
@media (max-width: 780px) { .admin-stat-row { gap: 14px; } }
@media (max-width: 560px) { .admin-stat-row { flex-direction: column; align-items: flex-start; gap: 12px; } }

.admin-alerts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.admin-alerts-grid:empty { display: none; }
.admin-alert-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-alert-card h4 { margin: 0 0 8px; color: var(--card-foreground); font-size: 13px; }
.admin-alert-card.is-warning, .admin-alert-card.is-critical { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); background: color-mix(in srgb, var(--destructive) 7%, var(--card)); }
.admin-alert-figure { margin: 0 0 4px; font-family: "Fraunces", serif; font-size: 24px; font-weight: 700; color: var(--card-foreground); }
.admin-alert-detail { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.admin-alert-meta { margin: 8px 0 0; color: var(--muted-foreground); font-size: 10.5px; font-style: italic; }
.admin-alert-label { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--secondary); color: var(--secondary-foreground); }
.admin-alert-card.is-warning .admin-alert-label, .admin-alert-card.is-critical .admin-alert-label { background: var(--destructive); color: #fff8f2; }
.admin-alert-list { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.admin-alert-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--card-foreground); }
.admin-alert-tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--secondary); color: var(--secondary-foreground); }
.admin-alert-tag.is-warning, .admin-alert-tag.is-critical { background: var(--destructive); color: #fff8f2; }
@media (max-width: 1050px) { .admin-alerts-grid { grid-template-columns: 1fr; } }

.admin-charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.admin-chart-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-chart-head h3 { margin: 0; color: var(--card-foreground); font-size: 15px; }
.admin-chart-head p { margin: 3px 0 14px; color: var(--muted-foreground); font-size: 11px; }
.admin-chart-body { width: 100%; }
.admin-chart-body svg { display: block; width: 100%; height: auto; }
.admin-chart-empty { padding: 30px 0; color: var(--muted-foreground); font-size: 12px; text-align: center; }

.admin-section-head { margin-top: 30px; }
.admin-section-head h3 { margin: 0; color: var(--card-foreground); font-size: 15px; }
.admin-section-head p { margin: 3px 0 14px; color: var(--muted-foreground); font-size: 11px; }
.admin-section-head p.admin-section-head-emphasis { font-size: 14px; font-weight: 600; color: var(--card-foreground); }

.admin-leaderboards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-leaderboard-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-leaderboard-card h4 { margin: 0 0 10px; color: var(--card-foreground); font-size: 13px; }
.admin-leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.admin-leaderboard-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.admin-leaderboard-item:last-child { border-bottom: none; }
.admin-leaderboard-rank { flex: 0 0 auto; width: 20px; color: var(--muted-foreground); font-size: 12px; font-weight: 700; text-align: center; }
.admin-leaderboard-name { flex: 1 1 auto; min-width: 0; color: var(--card-foreground); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-leaderboard-value { flex: 0 0 auto; color: var(--card-foreground); font-size: 12.5px; font-weight: 700; }
.admin-leaderboard-empty { padding: 14px 0; color: var(--muted-foreground); font-size: 11.5px; text-align: center; }

.admin-forecast-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-forecast-notice { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--muted-foreground) 8%, transparent); color: var(--muted-foreground); font-size: 12px; margin-bottom: 14px; }
.admin-forecast-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-forecast-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.admin-forecast-table th, .admin-forecast-table td { padding: 8px 10px; text-align: left; font-size: 12px; border-bottom: 1px solid var(--border); }
.admin-forecast-table th { color: var(--muted-foreground); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.admin-forecast-table td { color: var(--card-foreground); }
.admin-forecast-table tr:last-child td { border-bottom: none; }
.admin-forecast-meta { margin: 12px 0 0; color: var(--muted-foreground); font-size: 11px; }
.admin-forecast-breakeven { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 16px; }
.admin-forecast-breakeven h4 { margin: 0 0 12px; color: var(--card-foreground); font-size: 13px; }
.admin-forecast-breakeven-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-forecast-breakeven-grid div { display: flex; flex-direction: column; gap: 4px; }
.admin-forecast-breakeven-grid span { color: var(--muted-foreground); font-size: 11px; }
.admin-forecast-breakeven-grid b { color: var(--card-foreground); font-size: 15px; }
.admin-forecast-breakeven-grid div.positive b, .admin-forecast-table td.positive { color: #2f9e5c; }
.admin-forecast-breakeven-grid div.negative b, .admin-forecast-table td.negative { color: var(--destructive); }

.admin-mini-stat-card { display: flex; flex-direction: column; }
.admin-mini-stat-list { display: grid; gap: 8px; margin: 0; }
.admin-mini-stat-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.admin-mini-stat-list div:last-child { border-bottom: none; }
.admin-mini-stat-list dt { color: var(--muted-foreground); font-size: 11.5px; }
.admin-mini-stat-list dd { margin: 0; color: var(--card-foreground); font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }

.admin-bar-list { display: grid; gap: 8px; }
.admin-bar-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.admin-bar-label { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-bar-track { display: block; height: 6px; overflow: hidden; border-radius: 4px; background: var(--secondary); }
.admin-bar-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.admin-bar-value { color: var(--card-foreground); font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (max-width: 780px) { .admin-bar-row { grid-template-columns: 90px minmax(0, 1fr) auto; } }

@media (max-width: 780px) { .admin-leaderboards-grid { grid-template-columns: 1fr; } }
.admin-chart-legend { display: flex; gap: 16px; margin-top: 12px; color: var(--muted-foreground); font-size: 11px; }
.admin-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.admin-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.admin-legend-artists { background: var(--primary); }
.admin-legend-buyers { background: var(--muted-foreground); }
.admin-legend-in { background: #4caf82; }
.admin-legend-out { background: var(--destructive, #c0435a); }
.admin-revenue-bar { display: grid; gap: 6px; padding-top: 6px; }
.admin-revenue-row { display: flex; align-items: baseline; justify-content: space-between; color: var(--card-foreground); font-size: 12px; }
.admin-revenue-row b { color: var(--card-foreground); font-weight: 700; }
.admin-revenue-track { height: 10px; margin-bottom: 10px; overflow: hidden; border-radius: 20px; background: var(--secondary); }
.admin-revenue-fill { height: 100%; border-radius: inherit; transition: width .3s ease; }
.admin-revenue-fill-orders { background: var(--primary); }
.admin-revenue-fill-unlocks { background: var(--muted-foreground); }
.admin-revenue-fill-tips { background: var(--lilac); }
.admin-revenue-fill-positive { background: #2f9e5c; }
.admin-revenue-fill-negative { background: var(--destructive); }
.admin-revenue-row .positive { color: #2f9e5c; }
.admin-revenue-row .negative { color: var(--destructive); }

/* Heatmap de rétention par cohorte : intensité de fond proportionnelle au %,
   même teinte que --primary pour rester cohérent avec le reste du panneau admin. */
.admin-cohort-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-cohort-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.admin-cohort-table th, .admin-cohort-table td { padding: 8px 10px; text-align: center; font-size: 12px; border-bottom: 1px solid var(--border); }
.admin-cohort-table th { color: var(--muted-foreground); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.admin-cohort-table td:first-child, .admin-cohort-table th:first-child { text-align: left; }
.admin-cohort-table td.admin-cohort-cell { color: var(--card-foreground); font-weight: 600; border-radius: 6px; }
.admin-cohort-table tr.is-low-sample td { opacity: .45; }
.admin-cohort-empty { color: var(--muted-foreground); font-size: 12px; padding: 10px 0; }

.admin-filters-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.admin-filters-row input[type="search"] { flex: 1 1 220px; min-height: 38px; padding: 0 12px; border: 1px solid var(--input); border-radius: 8px; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 12px; }
.admin-filters-row select { min-height: 38px; padding: 0 10px; border: 1px solid var(--input); border-radius: 8px; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 12px; }

.admin-create-form { display: grid; gap: 14px; max-width: 460px; margin-bottom: 10px; }
.admin-create-form label { display: grid; gap: 7px; color: var(--card-foreground); font-size: 12px; font-weight: 700; }
.admin-create-form input,
.admin-create-form textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--input); border-radius: 8px; color: var(--card-foreground); background: var(--card); font: inherit; font-size: 12px; }
.admin-create-form textarea { min-height: 76px; resize: vertical; }
.admin-create-form input:focus,
.admin-create-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent); }
.admin-create-form button { justify-self: start; }

.admin-monthly-report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-monthly-report-head button { flex: 0 0 auto; white-space: nowrap; }
.admin-monthly-reports-list { display: grid; gap: 14px; margin-top: 16px; }
.admin-monthly-report-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-monthly-report-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-monthly-report-card-head b { color: var(--card-foreground); font-size: 14px; margin-right: 8px; }
.admin-monthly-report-card-head small { color: var(--muted-foreground); font-size: 11px; }
.admin-monthly-report-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.admin-monthly-report-stats-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.admin-monthly-report-stats-row span { color: var(--muted-foreground); font-size: 12px; }
.admin-monthly-report-stats-row b { color: var(--card-foreground); }
.admin-monthly-report-ai { color: var(--card-foreground); font-size: 13px; line-height: 1.7; white-space: normal; }
.admin-monthly-report-error { color: var(--destructive); font-size: 12px; }

.admin-accounts-list { display: grid; gap: 10px; }
.admin-account-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-account-row .avatar { flex: 0 0 auto; width: 36px; height: 36px; font-size: 14px; }
.admin-account-info { min-width: 0; flex: 1; }
.admin-account-info b { display: block; overflow: hidden; color: var(--card-foreground); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-account-info span { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; }
.admin-account-badges { display: flex; flex: 0 0 auto; gap: 6px; }
.admin-role-badge { padding: 3px 9px; border-radius: 20px; color: var(--card-foreground); background: var(--secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.admin-role-badge.is-suspended { color: #fff; background: var(--destructive, #c0435a); }
.admin-account-row .secondary-button, .admin-account-row .primary-button { flex: 0 0 auto; }
.admin-accounts-empty, .admin-audit-empty { padding: 20px; color: var(--muted-foreground); font-size: 12px; text-align: center; }

.admin-readonly-banner { margin: 0 0 18px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--card-foreground); font-size: 12.5px; line-height: 1.5; }

/* Fiche compte (modale admin). Plus large que les autres modales : elle affiche
   des faits sur deux colonnes, illisibles à 550px. */
.admin-account-modal-content { width: min(100%, 720px); }
.admin-account-detail { display: grid; gap: 14px; margin-top: 18px; }
.admin-account-detail-head { display: flex; align-items: center; gap: 12px; }
.admin-account-detail-head .avatar { flex: 0 0 auto; width: 46px; height: 46px; font-size: 18px; }
.admin-account-detail-id { min-width: 0; flex: 1; }
.admin-account-detail-id b { display: block; overflow: hidden; color: var(--card-foreground); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.admin-account-detail-id span { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; }
.admin-account-block { padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-account-block.is-alert { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); background: color-mix(in srgb, var(--destructive) 7%, var(--card)); }
.admin-account-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; margin: 0; }
.admin-account-facts > div { min-width: 0; }
.admin-account-facts dt { color: var(--muted-foreground); font-size: 11px; }
.admin-account-facts dd { margin: 2px 0 0; color: var(--card-foreground); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.admin-account-facts dd code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.admin-account-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.admin-account-list li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.admin-account-list li b { display: block; color: var(--card-foreground); font-size: 12.5px; }
.admin-account-list li small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; line-height: 1.4; }
.admin-account-note { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.admin-account-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .admin-account-facts { grid-template-columns: 1fr; } }

@media (max-width: 780px) {
  .admin-charts-grid { grid-template-columns: 1fr; }
  .admin-account-row { flex-wrap: wrap; }
  .admin-filters-row select { flex: 1 1 auto; }
}

/* 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); }
  .feed-aside { display: none; }
  .feed-scroller {
    display: block;
    column-width: 230px;
    column-gap: 18px;
    height: auto;
    max-height: none;
    overflow: visible;
    scroll-snap-type: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: 0;
    outline: 0;
  }
  body.dark .feed-scroller {
    box-shadow: none;
  }
  #live-feed { display: contents; }
  .feed-post, .feature-post {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0 0 18px;
    break-inside: avoid;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  /* Le display:block ci-dessus (nécessaire pour la grille masonry desktop) n'a
     pas de garde [hidden], donc il l'emportait sur le display:none natif de
     l'attribut hidden posé par le filtre d'onglets du feed (voir le clic sur
     .feed-tab dans app.ts) : en desktop, changer d'onglet ne cachait plus
     aucune publication, toutes restaient visibles quelle que soit la catégorie
     (signalé le 05/09/2026, capture avec l'onglet "Émotes & stream" actif
     affichant quand même les 3 œuvres). Même bug de cascade que la police des
     titres (Fraunces) corrigée plus tôt cette session. */
  .feed-post[hidden], .feature-post[hidden] { display: none; }
  .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 .post-visual {
    position: relative;
    inset: auto;
    overflow: hidden;
    background: var(--secondary);
  }
  .feed-post .post-visual:not(.live-post-visual) {
    aspect-ratio: 4 / 5;
  }
  .feed-post .post-visual img,
  .feed-post .post-visual video,
  .feed-post .live-post-media {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  .feed-post .next-art, .feed-post .scroll-cue { display: none; }
  .feed-post .post-overlay.top { left: 10px; right: 10px; top: 10px; }
  /* Corrige un bug reel : ce bouton (signaler/masquer une publication) etait totalement
     inaccessible en desktop (display:none sans aucune alternative pour y acceder). */
  .feed-post .ghost-icon { display: inline-flex; align-items: center; justify-content: center; }
  .feed-post .post-overlay.bottom {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 10px 12px 12px;
    gap: 8px;
  }
  .feed-post .post-caption { color: var(--card-foreground); text-shadow: none; }
  .feed-post .post-caption strong { font-size: 14px; line-height: 1.25; font-family: "Instrument Serif", serif; }
  .feed-post .post-caption span { display: none; }
  .feed-post .artist-chip { color: var(--card-foreground); }
  .feed-post .artist-chip small { color: var(--muted-foreground); }
  .feed-post .artist-chip .avatar { width: 26px; height: 26px; }
  .feed-post .artist-chip b { font-size: 12px; }
  .feed-post .artist-chip small { font-size: 10px; }
  .feed-post .post-actions { display: none; }
  .feed-post .post-visual { cursor: pointer; }

  /* CLS observé sur le rapport Cloudflare (#feed>div.feed-layout, score max) :
     en grille masonry desktop, .feed-post passe à height:auto/aspect-ratio:auto
     (règle ci-dessus), donc les 2 squelettes de #live-feed (qui n'ont pas de
     .post-visual, juste un .skeleton-shimmer en position:absolute) se
     retrouvent à hauteur quasi nulle au premier rendu, au lieu d'occuper "la
     même taille qu'un .feed-post réel" comme visé par le commentaire d'origine
     sur .feed-post-skeleton. Résultat : un bond de hauteur brutal au chargement,
     qu'il y ait des œuvres publiées (skeleton quasi vide -> carte 4/5) ou non
     (skeleton quasi vide -> message "Pas encore d'œuvre publiée", avec ses
     marges de 60px). On fixe le même ratio 4/5 que les vraies cartes pour que
     le squelette occupe déjà la bonne hauteur dès le premier rendu. */
  .feed-post-skeleton { aspect-ratio: 4 / 5; }
  /* Même logique pour l'état vide : sans hauteur réservée, il remplace les
     squelettes (hauteur quasi nulle en masonry, voir ci-dessus) par un bloc de
     texte avec 60px de marge verticale, ce qui pousse tout le reste de la page
     d'un coup. On réserve une hauteur comparable à une rangée de cartes et on
     centre le message dedans plutôt que de laisser le texte "sauter" en place. */
  .feed-empty-state { display: flex; align-items: center; justify-content: center; min-height: 320px; margin: 0; }
  .feed-empty-state[hidden] { display: none; }
}
.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; }
/* Correctif : sans photo, .avatar n'avait aucun fond (juste une bordure), donc
   l'initiale blanche ne restait lisible que par coïncidence selon ce qu'il y avait
   derrière (ex. sur la page profil, le rond chevauche la bannière ET le fond de
   page — la moitié basse de la lettre devenait blanc sur blanc en mode clair).
   On lui donne le même fond plein que .avatar-drop-preview pour être toujours lisible. */
.avatar:not(:has(img)) { color: white; background: var(--primary); }

.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; }

/* Notifications : liste dans une modale, cohérente avec les autres listes de cartes de l'appli. */
.notifications-modal-content { width: min(100%, 480px); }
.notifications-modal-actions { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
.notifications-modal-actions .text-button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 11px; font-weight: 700; }
.notifications-list { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.notifications-empty { margin: 12px 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.notification-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.notification-item:hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); }
.notification-item.is-unread { background: color-mix(in oklch, var(--primary) 6%, var(--card)); border-color: color-mix(in oklch, var(--primary) 30%, var(--border)); }
.notification-dot-mark { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-dot-mark { background: var(--primary); }
.notification-item b { display: block; color: var(--card-foreground); font-size: 12px; }
.notification-item small { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 11px; line-height: 1.4; }
.notification-item time { display: block; margin-top: 5px; color: var(--muted-foreground); font-size: 10px; }

/* Contenu mature (case à cocher à la publication, voir #publish-is-mature) :
   flouté sur toute vignette (feed, grilles, portfolio public, y compris ton
   propre tableau de bord — voir renderOwnArtworkCard) via artworkMediaMarkup().
   position:absolute;inset:0 plutôt que width/height:100% : le wrap doit occuper
   exactement la même zone que le média qu'il remplace, que ce média soit
   normalement en flux normal (.live-post-media, .portfolio-live-media, tous
   en width:100%;height:100% dans un parent déjà positionné) ou lui-même
   absolument positionné (.creator-work-media) — tous les conteneurs parents
   (.post-visual, .portfolio-card-live, .result-art, .creator-work) sont déjà
   position:relative/absolute avec une hauteur définie, donc inset:0 s'y cale
   correctement dans les deux cas. */
.mature-media-wrap { display: contents; }
.mature-media-wrap img, .mature-media-wrap video { filter: blur(22px) saturate(65%) brightness(.85); transform: scale(1.15); }
.mature-media-badge { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px; color: #fff; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
.mature-media-badge svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.7; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
/* Petit badge informatif dans la vue grand format (l'image y est nette : voir
   artworkMediaMarkup({ revealed: true }) dans openLiveArtwork) — sert juste à
   rappeler pourquoi l'aperçu était flouté avant le clic. */
.mature-badge { display: inline-flex; align-items: center; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px; color: #fff; background: color-mix(in oklch, var(--destructive, #c0435a) 78%, black); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mature-badge[hidden] { display: none; }
/* Repère "Épinglée" sur ta propre carte d'œuvre (voir renderOwnArtworkCard) —
   même style que .work-label ("Publié"/"Brouillon"), empilé juste dessous.
   Le badge de base est à 8px : illisible à cette taille pour un pictogramme
   emoji (📌) + texte, et le rendu de l'emoji à une taille aussi petite varie
   trop selon la police système/le moteur de rendu (glyphe tronché ou mal
   aligné avec le texte constaté sur Chrome, signalé par une artiste). On
   isole donc ce badge avec sa propre taille (un peu plus grande) et un
   alignement flex explicite plutôt que de compter sur la ligne de base du
   texte pour caler l'emoji. */
.work-label-pinned { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 9.5px; line-height: 1.4; }

/* Carrousel "Épinglé" en tête de l'onglet Œuvres du profil public (voir
   renderPinnedCarousel dans src/app.ts) — scroll-snap horizontal natif, les
   flèches ne font qu'un scrollBy sur la piste. Même logique de carte que
   .portfolio-card-live (position:relative + hauteur fixe) pour que le flou
   "Contenu mature" (artworkMediaMarkup) s'y pose correctement. */
.pinned-carousel { position: relative; margin: 0 0 22px; }
.pinned-carousel-label { margin: 0 0 10px; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pinned-carousel-track { display: flex; gap: 12px; margin: 0; padding: 0 0 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.pinned-slide { position: relative; flex: 0 0 240px; height: 200px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #183845; scroll-snap-align: start; cursor: pointer; }
.pinned-slide::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(8, 20, 26, .78)); }
.pinned-slide-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.pinned-slide-caption { position: absolute; z-index: 1; right: 11px; bottom: 9px; left: 11px; overflow: hidden; color: #fff; font-size: 12px; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.pinned-carousel-nav { position: absolute; top: 108px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--card-foreground); background: var(--card); box-shadow: var(--shadow-md-ui); font-size: 16px; line-height: 1; }
.pinned-carousel-nav.prev { left: -4px; }
.pinned-carousel-nav.next { right: -4px; }
@media (max-width: 780px) {
  .pinned-slide { flex-basis: 190px; height: 160px; }
  .pinned-carousel-nav { display: none; }
}

/* Sur desktop, la cloche ouvre un menu déroulant ancré sous elle plutôt qu'une
   modale centrée au milieu de l'écran (comme les autres modales de l'appli) —
   retour utilisateur du 23 août 2026, en comparaison avec le panneau de VGen,
   ancré près de son icône plutôt qu'au centre. --notif-anchor-top/right sont
   posées en JS (positionNotificationsFlyout) à partir de la position réelle du
   bouton, pour rester justes même si la mise en page du header change. Sur
   mobile, la fiche plein écran d'origine reste inchangée (voir media 780px
   plus haut) : un menu ancré n'a pas de sens sur un petit écran. */
@media (min-width: 781px) {
  #notifications-modal.modal-backdrop { background: transparent; backdrop-filter: none; }
  #notifications-modal .notifications-modal-content {
    position: fixed;
    top: var(--notif-anchor-top, 90px);
    right: var(--notif-anchor-right, 40px);
    left: auto;
    margin: 0;
    width: min(400px, calc(100vw - 32px));
    max-height: min(70vh, 600px);
    padding: 18px;
    border-radius: 16px;
    animation: notificationsFlyoutIn .16s ease;
  }
  /* L'eyebrow "NOTIFICATIONS" au-dessus du titre a du sens dans une modale
     centrée (contexte de page), mais fait doublon avec le titre dans un menu
     compact ancré sous la cloche — on garde juste "Notifications". */
  #notifications-modal .notifications-modal-content > .eyebrow { display: none; }
  #notifications-modal .notifications-modal-content h2 { margin-top: 4px; font-size: 18px; }
  #notifications-modal .notifications-modal-content .modal-close { top: 12px; right: 12px; width: 26px; height: 26px; font-size: 18px; }
}
@keyframes notificationsFlyoutIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Pages légales : lien discret, rappel sous le formulaire d'inscription. */
.legal-footer { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); }
.legal-footer a { color: var(--muted-foreground); font-size: 11px; text-decoration: none; }
.legal-footer a:hover { color: var(--primary); text-decoration: underline; }
.legal-footer-donate { padding: 0; border: 0; margin-left: auto; color: var(--primary); background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.legal-footer-donate:hover { text-decoration: underline; }
@media (max-width: 480px) { .legal-footer-donate { margin-left: 0; } }
/* Version globale (hors .view, voir index.html) : mêmes marges que le contenu
   des vues (padding/max-width de .view) pour rester aligné visuellement, quelle
   que soit la page affichée. */
.app-legal-footer { max-width: 1330px; margin: 36px auto 0; padding: 16px 52px 40px; }
@media (max-width: 1050px) { .app-legal-footer { padding: 16px 30px 40px; } }
@media (max-width: 780px) { .app-legal-footer { padding: 16px 16px calc(94px + env(safe-area-inset-bottom)); } }
.auth-legal { margin: 12px 0 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.5; text-align: center; }
.auth-legal a { color: var(--primary); }

/* Avis publics sur le profil artiste */
.artist-rating-summary { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: var(--foreground); font-size: 13px; font-weight: 700; }
/* Sans ce garde-fou, loadArtistPublicReviews() masquait ce bloc (.hidden = true)
   tant que les avis n'étaient pas encore chargés (ou en cas d'erreur), mais le
   display:flex ci-dessus l'affichait quand même, vide, sur chaque profil artiste. */
.artist-rating-summary[hidden] { display: none; }
.artist-rating-summary .rating-stars { color: #e0a63a; }
.artist-review-list { display: grid; gap: 14px; }
.artist-review-card { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.artist-review-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.artist-review-card header b { display: block; font-size: 13px; }
.artist-review-card header small { display: block; margin-top: 2px; color: #e0a63a; font-size: 11px; letter-spacing: .04em; }
.artist-review-share { flex: 0 0 auto; margin-top: 0; margin-left: auto; align-self: flex-start; }
.artist-review-card p { margin: 0; color: var(--foreground); font-size: 13px; line-height: 1.55; }
.artist-review-reply { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }

/* Bandeau hors-ligne */
.offline-banner { position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding: 9px 16px; color: #fff; background: #b3452f; font-size: 12px; font-weight: 700; text-align: center; }
.offline-banner[hidden] { display: none; }
/* Bandeau "nouvelle version disponible" : évite d'avoir à deviner qu'un
   déploiement a eu lieu et qu'un simple rechargement suffit (voir
   navigator.serviceWorker "controllerchange" côté JS). Position en bas
   plutôt qu'en haut pour ne jamais se superposer à .offline-banner. */
.update-banner { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 auto; padding: 11px 18px; max-width: 420px; border-radius: 12px; color: #fff; background: #2f2447; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: 12px; font-weight: 700; text-align: center; }
.update-banner[hidden] { display: none; }
.update-banner button { flex-shrink: 0; padding: 6px 14px; border: 0; border-radius: 8px; color: #2f2447; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Correctif typographique : "Instrument Serif" a des métriques de police
   (ascendant/descendant) nettement plus hautes que sa taille affichée, ce qui
   fait chevaucher visuellement les titres h1/h2 avec le texte "eyebrow"
   au-dessus, malgré un espacement correct en boîte. On ajoute de la place. */
.eyebrow { margin-bottom: 14px; }
.topbar h1, .page-header h1, .artist-identity h1, .search-hero h1, .messages-header h1, .creator-section-heading h2, .collection h2 { margin-top: 4px; }

/* Correctif visuel (surtout visible en mode clair) : sur la page profil créateur,
   .creator-profile-head centre verticalement l'avatar et le bloc nom/pseudo dans
   la même rangée flex, avec une marge négative pour faire chevaucher l'avatar sur
   la bannière colorée (.creator-cover). Conséquence non voulue : le centrage place
   le titre h1 (nom) exactement à cheval sur la frontière bannière/page, ce qui
   coupe visuellement le texte en deux couleurs de fond différentes. On pousse le
   titre vers le bas pour qu'il reste entièrement sous la bannière. Non appliqué en
   dessous de 781px : la mise en page mobile (grille, avatar en position absolue)
   ne présente pas ce chevauchement. */
@media (min-width: 781px) {
  .creator-profile-head h1 { margin-top: 34px; }
}

/* Récapitulatif de prix - modale de commande */
.order-price-summary { display: grid; gap: 6px; margin: 16px 0; padding: 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--secondary); }
.order-price-summary p { display: flex; justify-content: space-between; margin: 0; color: var(--muted-foreground); font-size: 12px; }
.order-price-summary b { color: var(--card-foreground); font-size: 13px; }
/* .order-price-summary fixe son display à grid, ce qui prime sur la règle UA
   [hidden] { display: none } — sans cette ligne, le bloc reste visible même
   avec .hidden = true en JS (bug trouvé en testant la demande sans offre,
   29/07). Même correctif déjà appliqué ailleurs dans ce fichier pour
   .account-menu, .nav-link, etc. */
.order-price-summary[hidden] { display: none; }
.order-price-note { margin: 0 0 16px; font-size: 11px; }

/* Bascule mode de recherche (oeuvres / artistes) */
.search-mode-toggle { justify-content: center; margin: 14px auto 0 !important; width: fit-content; }

/* Etat vide - mes inspirations */
.saved-empty-state { margin: 24px 0 0; padding: 28px 20px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; text-align: center; }
/* Feed sans aucune œuvre publiée (#live-feed vide) : ce <p> n'avait aucune
   règle dédiée, donc texte par défaut du navigateur (noir, aligné à gauche,
   sans marge) posé directement dans .feed-scroller — repris ici sur le même
   modèle que les autres états vides de l'app (.saved-empty-state ci-dessus). */
.feed-empty-state { max-width: 320px; margin: 60px auto; padding: 0 20px; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; text-align: center; }
.saved-empty-state[hidden] { display: none; }

/* Carte "Tu es artiste ?" (aside du feed d'accueil) : reprend .mini-card /
   .mini-card-title déjà themés clair+sombre, complète juste les styles de titre
   /paragraphe/bouton qui n'existaient jusqu'ici que pour .match-card. */
.artist-recruit-card h2 { margin: 14px 0 6px; font-size: 20px; letter-spacing: -.5px; }
.artist-recruit-card p { margin: 0 0 13px; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }

/* Page "Devenir artiste" (/devenir-artiste) */
.artist-pitch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.artist-pitch-card .mini-icon { margin-bottom: 12px; }
.artist-pitch-card h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.4px; }
.artist-pitch-card p { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }

.artist-pitch-steps { margin-top: 40px; }
.artist-pitch-steps h2 { margin: 0 0 18px; font-size: 22px; letter-spacing: -.5px; }
.artist-pitch-steps ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: pitch-step; }
.artist-pitch-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; counter-increment: pitch-step; }
.artist-pitch-steps li::before {
  content: counter(pitch-step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--primary-foreground);
  background: var(--primary);
  font-weight: 700;
  font-size: 14px;
}
.artist-pitch-steps li b { display: block; margin-bottom: 3px; font-size: 14px; }
.artist-pitch-steps li span { display: block; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }

.artist-pitch-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

@media (max-width: 780px) {
  .artist-pitch-grid { grid-template-columns: 1fr; }
  .artist-pitch-steps li { grid-template-columns: 30px 1fr; }
  .artist-pitch-steps li::before { width: 30px; height: 30px; font-size: 12px; }
}

/* Soutien libre / pourboire : chips de montant rapide au-dessus du champ manuel. */
.tip-amount-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tip-amount-chip {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--card-foreground);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tip-amount-chip.selected { border-color: var(--primary); color: var(--primary-foreground); background: var(--primary); }

/* Espace créateur : onglets et encarts réservés à l'abonnement. */
.creator-workspace-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.creator-workspace-tabs button { padding: 10px 14px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--muted-foreground); font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; }
.creator-workspace-tabs button.active { color: var(--foreground); border-bottom-color: var(--primary); }
.creator-pro-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pro-insight-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.pro-insight-card h3 { margin: 0 0 10px; color: var(--card-foreground); font-size: 14px; font-weight: 700; }
.pro-insight-card p { margin: 0 0 10px; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.pro-insight-card.is-locked { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.human-art-note-pending { border-color: var(--destructive); }
.human-art-note-pending span { color: var(--destructive); }

/* Page 404 (vue #not-found dans index.html). Affichee pour toute adresse inconnue,
   ainsi que pour une oeuvre ou un profil qui n'existe plus. Reprend les jetons du
   systeme de design (--card, --border, --primary...) : le rendu suit donc
   automatiquement le theme clair/sombre comme le reste du site. */
.not-found-view.active { display: flex; align-items: center; justify-content: center; min-height: 78vh; padding-top: 4vh; }
.not-found-card {
  width: 100%;
  max-width: 560px;
  padding: 42px 34px 32px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  background: var(--card);
  box-shadow: var(--shadow-sm-ui);
  text-align: center;
}
.not-found-code {
  margin: 4px 0 6px;
  color: var(--primary);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(66px, 13vw, 104px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
}
.not-found-card h1 { margin: 0 0 12px; color: var(--card-foreground); font-family: "Fraunces", Georgia, serif; font-size: 28px; letter-spacing: -1px; }
.not-found-lead { max-width: 42ch; margin: 0 auto 26px; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.not-found-links { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border); }
.not-found-links .eyebrow { margin-bottom: 12px; }
.not-found-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 20px; margin: 0; padding: 0; list-style: none; }
.not-found-links button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.not-found-links button:hover { color: var(--foreground); }
@media (max-width: 700px) {
  .not-found-view.active { min-height: 0; padding-top: 0; }
  .not-found-card { padding: 30px 20px 26px; }
}

/* --- Onglet URSSAF de l'espace admin : declaration mensuelle de CA. --- */
.urssaf-year-picker { display: flex; align-items: center; gap: 8px; }
.urssaf-year-picker label { color: var(--muted-foreground); font-size: 13px; }
.urssaf-year-picker select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); font: inherit; font-size: 13px; }
.urssaf-alert { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--destructive); border-radius: var(--radius); background: color-mix(in oklch, var(--destructive) 8%, var(--card)); color: var(--card-foreground); font-size: 13px; line-height: 1.5; }
.urssaf-cumul { margin: 0 0 12px; color: var(--muted-foreground); font-size: 13px; }
.urssaf-cumul b { color: var(--card-foreground); font-size: 15px; }
.urssaf-thresholds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 22px; }
.urssaf-thresholds .urssaf-cumul { grid-column: 1 / -1; }
.urssaf-gauge { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.urssaf-gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.urssaf-gauge-head span { color: var(--muted-foreground); font-size: 13px; }
.urssaf-gauge-head b { color: var(--card-foreground); font-size: 13px; }
.urssaf-gauge-track { display: block; height: 6px; border-radius: 999px; background: var(--muted-ui); overflow: hidden; }
.urssaf-gauge-track > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .3s ease; }
.urssaf-gauge.is-warn .urssaf-gauge-track > span { background: #e0952f; }
.urssaf-gauge.is-over .urssaf-gauge-track > span { background: var(--destructive); }
.urssaf-gauge small { display: block; margin-top: 8px; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
.urssaf-months { display: grid; gap: 14px; }
.urssaf-month-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.urssaf-month-card.is-current { border-style: dashed; }
.urssaf-month-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.urssaf-month-head > div:first-child b { display: block; color: var(--card-foreground); font-size: 15px; text-transform: capitalize; }
.urssaf-month-head > div:first-child small { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 12px; }
.urssaf-month-amount { text-align: right; }
.urssaf-month-amount b { display: block; color: var(--primary); font-size: 26px; line-height: 1.1; }
.urssaf-month-amount small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.urssaf-month-meta { margin: 12px 0 0; color: var(--muted-foreground); font-size: 12px; }
.urssaf-month-breakdown { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.urssaf-month-breakdown span { padding: 5px 10px; border-radius: 999px; background: var(--muted-ui); color: var(--muted-foreground); font-size: 12px; }
.urssaf-month-breakdown span b { color: var(--card-foreground); }
.urssaf-month-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 700px) {
  .urssaf-month-amount { text-align: left; }
  .urssaf-month-amount b { font-size: 22px; }
}
.admin-monthly-report-urssaf { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--muted-ui); color: var(--muted-foreground); font-size: 12px; }
.admin-monthly-report-urssaf b { color: var(--card-foreground); font-size: 14px; }
.urssaf-month-breakdown span.is-subset { background: transparent; border: 1px dashed var(--border); }