:root {
  --wine: #87052d;
  --wine-deep: #69001f;
  --wine-soft: #f8e9ee;
  --ink: #2f2e2e;
  --muted: #766f71;
  --paper: #fffdfb;
  --line: #e9e1dd;
  --surface: #ffffff;
  --backdrop: #f7f3ef;
  --shadow: 0 18px 44px rgba(92, 57, 48, .10);
  font-family: Manrope, Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 88% 3%, #fff 0, #f8f3ef 38%, #f4efeb 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.page-shell { width: min(1400px, calc(100% - 48px)); margin: 20px auto 54px; }
.app-header { position: relative; min-height: 118px; padding: 22px 28px; display: flex; align-items: center; gap: 22px; overflow: hidden; color: white; border-radius: 29px; background: linear-gradient(102deg, var(--wine-deep) 0%, var(--wine) 70%, #a70d3f 100%); box-shadow: 0 12px 34px rgba(102, 0, 34, .18); }
.app-header::after { content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(49%, 680px); pointer-events: none; opacity: .17; background: url("/assets/polyhabitat-mark-light.png") no-repeat center / 620px auto; }
.brand, .app-label, .header-actions { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: white; text-decoration: none; letter-spacing: .02em; font-family: Montserrat, sans-serif; font-size: 26px; font-weight: 800; }
.brand > span:last-child span { display: inline-block; position: relative; margin-right: -1px; }
.brand-mark { width: 36px; height: 41px; position: relative; display: inline-block; border-bottom: 8px solid white; }
.brand-mark::before { content: ""; position: absolute; left: 6px; bottom: 0; width: 22px; height: 25px; border: 5px solid white; border-bottom: 0; transform: skewX(-23deg); }
.brand-mark i { position: absolute; z-index: 1; width: 7px; height: 16px; background: var(--wine); left: 15px; bottom: 0; }
.header-divider { width: 1px; height: 47px; position: relative; z-index: 1; background: rgba(255,255,255,.4); }
.app-label { display: grid; gap: 2px; }
.app-label span, .eyebrow { font-size: 11px; color: var(--wine); letter-spacing: .1em; font-weight: 800; }
.app-label span { color: #ffdbe5; }
.app-label strong { font-size: 24px; letter-spacing: -.04em; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ghost-header { border: 0; color: white; background: rgba(255,255,255,.12); border-radius: 12px; min-height: 44px; padding: 0 13px; display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.ghost-header:hover { background: rgba(255,255,255,.22); }

.context-card { margin-top: 22px; min-height: 81px; padding: 17px 18px 17px 22px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.context-card .eyebrow { margin: 0 0 3px; }.context-title { margin: 0; font-weight: 800; font-size: 16px; }
.view-controls { display: flex; gap: 8px; }.icon-button { border: 0; color: var(--wine); background: #f4f0ee; border-radius: 13px; min-width: 43px; min-height: 43px; font-size: 20px; font-weight: 700; }.icon-button:hover, .icon-button.selected { color: #fff; background: var(--wine); }
.intro-row { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin: 30px 2px 22px; }.intro-row .eyebrow { margin: 0 0 4px; }.intro-row h1 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.055em; line-height: 1.15; }.intro-copy { margin: 8px 0 0; color: var(--muted); }
.primary-button, .secondary-button { border: 0; min-height: 48px; padding: 0 18px; border-radius: 13px; font-weight: 800; }.primary-button { color: #fff; background: var(--wine); box-shadow: 0 10px 22px rgba(135, 5, 45, .20); }.primary-button:hover { background: var(--wine-deep); }.primary-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }.primary-button span { font-size: 20px; vertical-align: -1px; margin-right: 4px; }.secondary-button { color: var(--wine); background: var(--wine-soft); }.secondary-button:hover { background: #f2dce4; }
.button-loader { display: inline-block; width: 15px; height: 15px; margin: 0 7px 0 1px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .42); border-top-color: #fff; border-radius: 50%; animation: button-loading-spin .72s linear infinite; } @keyframes button-loading-spin { to { transform: rotate(360deg); } }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; }.simulation-button { border: 1px solid #e2aabe; background: #fff8fa; }.simulation-button span { margin-right: 4px; font-size: 16px; }

.library-card { overflow: hidden; background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }.library-toolbar { padding: 20px; gap: 14px; display: flex; border-bottom: 1px solid var(--line); }.search-box { flex: 1; min-width: 100px; height: 49px; display: flex; align-items: center; gap: 10px; padding: 0 15px; background: #f8f6f4; border: 1px solid transparent; border-radius: 12px; color: var(--wine); }.search-box:focus-within { background: #fff; border-color: #dca8b9; box-shadow: 0 0 0 3px #f9e8ee; }.search-box span { font-size: 25px; line-height: 1; }.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }.search-box input::placeholder { color: #979092; }.library-toolbar select { border: 1px solid var(--line); padding: 0 14px; min-width: 160px; background: #fff; border-radius: 12px; font-weight: 700; color: #514b4d; }.filter-mobile { display: none; }
.library-layout { min-height: 630px; display: grid; grid-template-columns: 232px minmax(0, 1fr); }.filters-panel { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); padding: 23px 19px; border-right: 1px solid var(--line); background: rgba(253,251,249,.96); }.filters-heading { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; margin-bottom: 11px; }.filters-heading strong { font-size: 14px; }.text-button { padding: 0; background: none; color: var(--wine); border: 0; font-weight: 800; font-size: 12px; }.filter-group { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid #eee8e4; }.filter-group:last-child { border-bottom: 0; }.filter-group h2 { margin: 0 0 9px; font-size: 12px; color: #716a6c; }.filter-group button { width: 100%; padding: 7px 6px; display: flex; align-items: center; gap: 7px; color: #4d484a; background: transparent; border: 0; border-radius: 7px; text-align: left; font-size: 12px; }.filter-group button:hover { background: #f6eaee; }.filter-group button.active { color: var(--wine); font-weight: 800; background: var(--wine-soft); }.filter-group button span { margin-left: auto; min-width: 17px; color: #a59da0; text-align: right; }.swatch { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 100%; border: 1px solid rgba(0,0,0,.1); }.anthracite { background: #45484a; }.vert { background: #405a48; }.bleu { background: #1c3151; }
.media-area { min-width: 0; padding: 20px; }.active-filters-row { min-height: 24px; margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }.filter-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--wine); padding: 5px 9px; border: 1px solid #e6bdca; border-radius: 20px; background: #fff8fa; font-size: 11px; font-weight: 800; }.filter-chip button { border: 0; padding: 0; color: currentColor; background: transparent; font-size: 15px; line-height: 12px; }.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }.media-card { padding: 0; overflow: hidden; text-align: left; border: 1px solid #e9e3df; background: #fff; border-radius: 16px; transition: .18s ease; }.media-card:hover { transform: translateY(-2px); border-color: #dca8b9; box-shadow: 0 12px 24px rgba(88,50,47,.10); }.media-thumb { position: relative; aspect-ratio: 1.28; overflow: hidden; background: #e4d4c7; background-size: cover; background-position: center; }.media-thumb.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18)); }.mock-facade { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.26), transparent 45%), linear-gradient(160deg, #d6c2ac 0 49%, #baa58e 49% 52%, #d6c2ac 52%); }.mock-facade::before { content: ""; position: absolute; width: 28%; height: 52%; top: 29%; left: 19%; border: 11px solid var(--shutter, #44504b); background: #c5d4dc; box-shadow: 94px 12px 0 -2px #c5d4dc, 94px 12px 0 9px var(--shutter, #44504b); }.mock-facade::after { content: ""; position: absolute; left: -10%; right: -10%; top: 17%; height: 13%; background: rgba(96,61,54,.55); transform: rotate(-6deg); }.tone-vert { --shutter: #435b45; }.tone-ocre { --shutter: #996c3e; }.tone-ardoise { --shutter: #3d464d; }.tone-neige { --shutter: #ebe9e4; }.tone-pierre { --shutter: #28405a; }.tone-sable { --shutter: #eee5d7; }.tone-terracotta { --shutter: #933b34; }.tone-bleu { --shutter: #355377; }.media-badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 8px; color: #fff; background: rgba(42,35,35,.68); border-radius: 8px; font-size: 10px; font-weight: 800; backdrop-filter: blur(4px); }.media-info { padding: 12px 13px 13px; }.media-info h2 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.media-info p { overflow: hidden; margin: 4px 0 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.media-meta { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; color: #8e8689; font-size: 10px; }.media-meta strong { color: var(--wine); font-weight: 800; }.feedback-band { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #f0c4ce; border-radius: 10px; color: #8e163b; background: #fff4f6; font-size: 12px; }.empty-state { min-height: 420px; padding: 70px 20px; text-align: center; }.empty-state > span { display: inline-grid; width: 50px; height: 50px; place-items: center; color: var(--wine); background: var(--wine-soft); border-radius: 16px; font-size: 31px; }.empty-state h2 { margin: 14px 0 4px; font-size: 19px; }.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }.hidden { display: none !important; }

.details-drawer { position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; width: min(430px, 100%); padding: 20px; transform: translateX(105%); background: #fff; box-shadow: -18px 0 45px rgba(58,37,32,.16); transition: transform .25s ease; }.details-drawer.open { transform: translateX(0); }.drawer-backdrop { position: fixed; z-index: 9; inset: 0; visibility: hidden; opacity: 0; background: rgba(40,29,29,.28); transition: .25s ease; }.drawer-backdrop.open { visibility: visible; opacity: 1; }.drawer-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.drawer-visual { margin: 19px 0; overflow: hidden; border-radius: 16px; aspect-ratio: 1.35; background: #e4d4c7; }.drawer-visual .media-thumb { height: 100%; }.detail-title { margin: 0 0 3px; font-size: 22px; letter-spacing: -.04em; }.detail-subtitle { margin: 0 0 20px; color: var(--muted); }.detail-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }.detail-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; background: #fff; font-size: 12px; }.detail-list div:nth-child(even) { background: #fdfaf8; }.detail-list span { color: var(--muted); }.detail-list strong { text-align: right; }.drawer-actions { display: flex; gap: 9px; margin-top: 20px; }.drawer-actions button { flex: 1; }

.upload-dialog, .login-dialog, .simulation-dialog { width: min(655px, calc(100% - 24px)); max-height: calc(100dvh - 30px); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 26px 70px rgba(61,28,39,.30); }.login-dialog { width: min(460px, calc(100% - 24px)); }.simulation-dialog { width: min(780px, calc(100% - 24px)); }.upload-dialog::backdrop, .login-dialog::backdrop, .simulation-dialog::backdrop { background: rgba(52,37,37,.42); backdrop-filter: blur(3px); }.upload-dialog form, .login-dialog form, .simulation-dialog form { padding: 25px; overflow: auto; max-height: calc(100dvh - 30px); }.modal-header { display: flex; justify-content: space-between; align-items: start; }.modal-header .eyebrow { margin: 0 0 3px; }.modal-header h2 { margin: 0; letter-spacing: -.04em; font-size: 25px; }.modal-intro { margin: 13px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }.upload-step { display: flex; align-items: center; gap: 10px; margin: 17px 0 10px; }.upload-step > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: var(--wine); border-radius: 100%; font-size: 12px; font-weight: 800; }.upload-step div { display: grid; gap: 2px; }.upload-step strong { font-size: 13px; }.upload-step small { color: var(--muted); font-size: 11px; }.project-combobox { position: relative; }.project-combobox input, .login-field input { width: 100%; height: 47px; padding: 0 13px; border: 1px solid #dcd3cf; border-radius: 11px; outline: 0; }.project-combobox input:focus, .login-field input:focus { border-color: #c26a88; box-shadow: 0 0 0 3px var(--wine-soft); }.project-results { position: absolute; z-index: 2; top: calc(100% + 4px); width: 100%; max-height: 198px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 10px 25px rgba(50,35,35,.13); }.project-result { width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid #f1ece9; background: #fff; text-align: left; }.project-result:hover { background: #fbf2f5; }.project-result strong, .project-result small { display: block; }.project-result strong { color: var(--wine); font-size: 12px; }.project-result small { margin-top: 3px; color: var(--muted); font-size: 11px; }.selected-project { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 10px 12px; color: #5e1231; background: var(--wine-soft); border-radius: 10px; font-size: 12px; font-weight: 800; }.selected-project button { border: 0; padding: 2px; color: var(--wine); background: transparent; font-size: 18px; }.project-metadata { min-height: 46px; margin-top: 10px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: var(--muted); background: #faf8f7; border: 1px dashed #dfd6d2; border-radius: 10px; font-size: 11px; }.metadata-pill { padding: 4px 7px; color: #5e1231; background: #fff; border-radius: 15px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }.dropzone { min-height: 144px; display: grid; place-items: center; align-content: center; gap: 5px; color: #604e54; border: 1.5px dashed #cfa7b4; border-radius: 14px; background: #fffafb; text-align: center; }.dropzone.dragging { border-color: var(--wine); background: #fff1f5; }.dropzone input { display: none; }.dropzone strong { color: var(--wine); font-size: 13px; }.dropzone small { color: var(--muted); font-size: 11px; }.drop-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 10px; background: var(--wine); font-size: 21px; }.file-list { display: grid; gap: 7px; margin-top: 9px; }.file-row { display: flex; align-items: center; gap: 9px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }.file-row img { width: 34px; height: 28px; border-radius: 5px; object-fit: cover; }.file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-row small { margin-left: auto; color: var(--muted); }.login-field { display: grid; gap: 6px; margin: 13px 0; color: #554c4f; font-size: 12px; font-weight: 800; }.login-error { margin: 15px 0 0; padding: 9px 10px; color: #8e163b; background: #fff0f3; border-radius: 9px; font-size: 12px; }.form-actions { display: flex; justify-content: end; gap: 9px; margin-top: 22px; }.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: calc(100% - 30px); padding: 11px 15px; transform: translate(-50%, 25px); visibility: hidden; opacity: 0; color: #fff; background: #343031; border-radius: 10px; box-shadow: 0 7px 23px rgba(0,0,0,.22); font-size: 12px; font-weight: 700; transition: .2s ease; }.toast.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; }

@media (max-width: 840px) { .page-shell { width: min(100% - 28px, 680px); margin-top: 14px; }.app-header { min-height: 94px; padding: 18px; border-radius: 22px; }.app-header::after { width: 45%; background-size: 490px auto; }.brand { font-size: 21px; }.brand-mark { transform: scale(.82); transform-origin: left center; margin-right: -5px; }.header-divider { height: 37px; }.app-label strong { font-size: 19px; }.header-actions { gap: 6px; }.ghost-header span { display: none; }.intro-row { align-items: start; flex-direction: column; gap: 16px; }.library-layout { grid-template-columns: 1fr; }.filters-panel { display: none; border: 0; }.filters-panel.mobile-open { display: block; border-bottom: 1px solid var(--line); }.filter-mobile { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 100px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 800; }.filter-mobile span { display: none; padding: 2px 6px; color: #fff; background: var(--wine); border-radius: 10px; font-size: 10px; }.filter-mobile.has-filters span { display: inline; }.media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 500px) { .page-shell { width: min(100% - 18px, 500px); margin-bottom: 24px; }.app-header { gap: 11px; }.header-divider, .app-label span { display: none; }.app-label { margin-left: auto; }.context-card { margin-top: 13px; min-height: 69px; }.context-title { font-size: 13px; }.intro-row { margin-top: 23px; }.intro-row h1 { font-size: 28px; }.intro-copy { font-size: 13px; }.primary-button { width: 100%; }.library-toolbar { padding: 12px; flex-wrap: wrap; }.search-box { flex-basis: 100%; }.library-toolbar select, .filter-mobile { height: 40px; flex: 1; min-width: 0; }.media-area { padding: 12px; }.media-grid { gap: 10px; }.media-info { padding: 9px; }.media-info h2 { font-size: 12px; }.media-info p { font-size: 10px; }.media-meta { margin-top: 7px; font-size: 9px; }.upload-dialog form { padding: 18px; }.form-actions { flex-direction: column-reverse; }.form-actions button { width: 100%; }.modal-header h2 { font-size: 22px; } }

/* Banque d’images — mêmes facettes et règles que l’application Distributeur. */
.library-toolbar-title { display: grid; flex: 1; gap: 2px; }.library-toolbar-title strong { font-size: 16px; }.library-toolbar-title span { color: var(--muted); font-size: 12px; }.library-toolbar-actions { display: flex; gap: 9px; align-items: center; }.compact-button { min-height: 42px; padding: 0 13px; font-size: 12px; }.filters-footer { z-index: 1; flex: 0 0 auto; padding: 0 0 14px; background: rgba(253,251,249,.96); }.filters-footer .primary-button { width: 100%; min-height: 42px; font-size: 12px; }.close-mobile-filters { display: none; }.resource-filter-sections { display: grid; flex: 1 1 auto; gap: 17px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }.resource-filter-section { padding-bottom: 16px; border-bottom: 1px solid #eee8e4; }.resource-filter-section h2 { margin: 0 0 9px; color: #716a6c; font-size: 12px; }.resource-filter-option { display: flex; align-items: center; gap: 7px; padding: 5px 0; color: #4d484a; font-size: 12px; cursor: pointer; }.resource-filter-option input { accent-color: var(--wine); }.resource-filter-option span { line-height: 1.25; }.resource-filter-select, .resource-filter-text { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid #dfd7d3; border-radius: 9px; outline: 0; background: #fff; color: #4d484a; font-size: 12px; }.resource-filter-select:focus, .resource-filter-text:focus { border-color: #c26a88; box-shadow: 0 0 0 3px var(--wine-soft); }.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 25px 0 6px; }.pagination span { min-width: 105px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 700; }.pagination button:disabled { cursor: not-allowed; opacity: .45; }.media-thumb img.dynamic-image { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }.media-thumb .media-badge { z-index: 3; }.media-thumb img.dynamic-image + .mock-facade { display: none; }.search-help { margin: 8px 0 0; color: var(--muted); font-size: 11px; }.search-help[data-tone="success"] { color: #267253; }.search-help[data-tone="error"] { color: #a21b42; }.upload-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.upload-field { min-width: 0; display: grid; gap: 6px; color: #554c4f; font-size: 12px; font-weight: 800; }.upload-field input:not([type="checkbox"]), .upload-field select { width: 100%; min-height: 43px; padding: 0 10px; border: 1px solid #dcd3cf; border-radius: 9px; outline: 0; color: var(--ink); background: #fff; }.upload-field input:focus, .upload-field select:focus { border-color: #c26a88; box-shadow: 0 0 0 3px var(--wine-soft); }.upload-field input[readonly] { color: #857d80; background: #f7f4f2; }.leaf-counts { grid-column: span 2; padding: 0; border: 0; }.leaf-counts legend { margin-bottom: 6px; }.leaf-counts > div { display: flex; flex-wrap: wrap; gap: 7px; }.leaf-counts label, .repliable-field span { padding: 6px 8px; border: 1px solid #e4d9d5; border-radius: 8px; background: #fdfaf9; font-size: 12px; font-weight: 700; }.leaf-counts input, .repliable-field input { accent-color: var(--wine); }.repliable-field { align-items: start; }.repliable-field span { width: fit-content; }.selected-project small { color: #7e6871; font-weight: 600; }

@media (max-width: 840px) { .filters-panel { position: static; display: none; max-height: none; }.filters-panel.mobile-open { display: block; padding-top: 18px; }.close-mobile-filters { display: block; }.filters-footer { padding-bottom: 14px; }.resource-filter-sections { overflow: visible; }.library-toolbar-title { min-width: 150px; }.library-toolbar-actions { margin-left: auto; }.library-toolbar .filter-mobile { display: inline-flex; min-height: 42px; }.library-toolbar .compact-button { min-height: 42px; } }
@media (max-width: 500px) { .library-toolbar-title { flex-basis: 100%; }.library-toolbar-actions { width: 100%; }.library-toolbar-actions > * { flex: 1; }.upload-fields { grid-template-columns: 1fr; }.leaf-counts { grid-column: span 1; }.pagination { gap: 7px; }.pagination span { min-width: 82px; font-size: 10px; }.pagination .compact-button { padding: 0 9px; font-size: 11px; } }

.project-combobox { display: flex; gap: 8px; }.project-combobox input { min-width: 0; }.project-search-button { flex: 0 0 auto; padding: 0 13px; border: 0; border-radius: 11px; color: #fff; background: var(--wine); font-size: 12px; font-weight: 800; }.project-search-button:disabled { opacity: .5; }

/* Simulation AI */
.simulation-dropzone { min-height: 132px; }.simulation-file-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }.simulation-file { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.simulation-file img { display: block; width: 100%; height: 88px; object-fit: cover; }.simulation-file span { display: block; overflow: hidden; padding: 7px 8px; color: #554c4f; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.simulation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.simulation-field { min-width: 0; display: grid; gap: 6px; margin: 0; color: #554c4f; font-size: 12px; font-weight: 800; }.simulation-field > span { display: flex; justify-content: space-between; gap: 8px; }.simulation-field > span small { color: var(--muted); font-weight: 600; }.simulation-field input:not([type="radio"]), .simulation-field select, .simulation-field textarea { width: 100%; min-height: 43px; padding: 0 10px; border: 1px solid #dcd3cf; border-radius: 9px; outline: 0; color: var(--ink); background: #fff; }.ral-input-wrap { position: relative; display: block !important; }.ral-input-wrap input { padding-right: 49px !important; }.ral-swatch-preview { position: absolute; top: 50%; right: 10px; width: 24px; height: 24px; transform: translateY(-50%); border: 1px solid rgba(48, 35, 39, .22); border-radius: 50%; background: repeating-conic-gradient(#e6dfdb 0 25%, #fff 0 50%) 50% / 8px 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .62); transition: background .16s ease; }.ral-swatch-preview.is-known { background: var(--ral-preview-color); }.ral-preview-message { min-height: 16px; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.35; }.ral-preview-message.is-known { color: #39705b; }.ral-preview-message.is-unknown { color: #9a4a5c; }.simulation-field textarea { min-height: 88px; padding: 10px; resize: vertical; line-height: 1.45; }.simulation-field input:focus, .simulation-field select:focus, .simulation-field textarea:focus { border-color: #c26a88; box-shadow: 0 0 0 3px var(--wine-soft); }.simulation-choice { padding: 0; border: 0; }.simulation-choice legend { margin-bottom: 6px; }.choice-row { display: flex; flex-wrap: wrap; gap: 7px; }.choice-row label { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid #e4d9d5; border-radius: 9px; background: #fdfaf9; font-size: 12px; font-weight: 700; }.choice-row input { accent-color: var(--wine); }.field-help { color: var(--muted); font-weight: 600; line-height: 1.4; }.simulation-description { grid-column: span 2; }.simulation-disclaimer { margin: 17px 0 0; padding: 10px 12px; color: #7a5c64; border: 1px solid #eed7de; border-radius: 10px; background: #fff9fa; font-size: 11px; line-height: 1.45; }.simulation-results { margin-top: 26px; padding-top: 21px; border-top: 1px solid var(--line); }.simulation-results .eyebrow { margin: 0 0 3px; }.simulation-results h3 { margin: 0 0 13px; font-size: 18px; letter-spacing: -.03em; }.simulation-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.simulation-result { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.simulation-result img { display: block; width: 100%; aspect-ratio: 1.34; object-fit: cover; background: #f4efeb; }.simulation-result-info { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px; }.simulation-result-info strong { overflow: hidden; min-width: 0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.simulation-result-info a { flex: 0 0 auto; color: var(--wine); font-size: 11px; font-weight: 800; }.simulation-error { display: grid; min-height: 175px; place-content: center; gap: 6px; padding: 20px; color: #8e163b; background: #fff5f7; text-align: center; font-size: 12px; }.simulation-error strong { color: var(--wine); }

@media (max-width: 500px) { .intro-actions { width: 100%; justify-content: stretch; }.intro-actions button { flex: 1; width: auto; padding: 0 10px; }.simulation-fields, .simulation-result-grid { grid-template-columns: 1fr; }.simulation-description { grid-column: span 1; }.simulation-file-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.simulation-dialog form { padding: 18px; } }

/* Identité Polyhabitat et connexion Media Hub. */
.brand { gap: 0; }
.brand-logo-wrap { display: block; flex: 0 0 auto; width: 214px; height: 70px; overflow: hidden; }
.brand-logo-wrap img { display: block; width: 320px; max-width: none; height: auto; transform: translate(-56px, -45px); }

.login-dialog { width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; border: 0; border-radius: 28px; background: transparent; box-shadow: 0 30px 85px rgba(61, 28, 39, .32); }
.login-dialog form { max-height: none; padding: 0; overflow: hidden; }
.login-shell { padding: 20px; background: linear-gradient(145deg, #fffdfc, #f7f2ee); }
.login-brand-header { position: relative; min-height: 118px; display: flex; align-items: center; gap: 21px; overflow: hidden; padding: 22px 26px; color: #fff; border-radius: 25px; background: linear-gradient(102deg, var(--wine-deep) 0%, var(--wine) 68%, #a70d3f 100%); box-shadow: 0 12px 30px rgba(102, 0, 34, .15); }
.login-brand-header::after { content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 53%; pointer-events: none; opacity: .17; background: url("/assets/polyhabitat-mark-light.png") no-repeat center / 620px auto; }
.login-logo-wrap, .login-header-divider, .login-app-label { position: relative; z-index: 1; }
.login-logo-wrap { display: block; flex: 0 0 auto; width: 214px; height: 70px; overflow: hidden; }
.login-logo-wrap img { display: block; width: 320px; max-width: none; height: auto; transform: translate(-56px, -45px); }
.login-header-divider { width: 1px; height: 47px; background: rgba(255, 255, 255, .4); }
.login-app-label { display: grid; gap: 2px; }
.login-app-label small { color: #ffdbe5; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.login-app-label strong { font-family: Montserrat, sans-serif; font-size: 25px; letter-spacing: -.04em; }
.login-content { display: grid; grid-template-columns: minmax(300px, 44%) minmax(0, 56%); min-height: 468px; margin-top: 22px; overflow: hidden; border: 1px solid #e4dad5; border-radius: 25px; background: #fff; }
.login-story { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 48px; color: #fff; background: #2e2e2f; }
.login-story::before { content: ""; position: absolute; inset: 0; opacity: .13; background: url("/assets/polyhabitat-mark-white.png") repeat center / 170px auto; }
.login-story > * { position: relative; z-index: 1; }
.login-story-icon { display: grid; width: 68px; height: 68px; place-items: center; margin-bottom: 2px; border-radius: 18px; background: var(--wine); box-shadow: 0 10px 20px rgba(0, 0, 0, .18); }
.login-story-icon > span { display: block; width: 56px; height: 48px; overflow: hidden; }
.login-story-icon img { display: block; width: 184px; max-width: none; height: auto; transform: translate(-65px, -24px); }
.login-story h2 { max-width: 360px; margin: 0; font-family: Montserrat, sans-serif; font-size: clamp(29px, 3vw, 41px); line-height: 1.15; letter-spacing: -.055em; }
.login-story > span:last-child { max-width: 338px; margin-top: 23px; color: #f2e8ea; font-size: 15px; line-height: 1.65; }
.login-access { padding: 52px 54px 33px; }
.login-access-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.login-access-heading .eyebrow { margin: 0 0 4px; }
.login-access-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.045em; }
.login-close { flex: 0 0 auto; width: 36px; height: 36px; color: var(--wine); border: 1px solid #ead9de; background: #fff8fa; }
.login-access-intro { margin: 15px 0 21px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.login-field { margin: 13px 0; font-size: 12px; }
.login-field input { height: 52px; border-color: #d4dceb; background: #eaf0fa; font-weight: 700; }
.login-field input:focus { border-color: #c26a88; background: #f5f8fe; }
.login-error { margin-top: 13px; }
.login-submit { width: 100%; min-height: 50px; margin-top: 8px; font-size: 14px; }
.login-security-note { margin: 13px 0 0; color: #857d80; font-size: 10px; line-height: 1.45; }
.login-cancel { display: block; margin: 9px auto 0; padding: 5px 8px; color: #766f71; border: 0; background: transparent; font-size: 11px; font-weight: 700; }
.login-cancel:hover { color: var(--wine); }

/* Résultat de la Simulation AI : consultation immersive et retouche itérative. */
.simulation-dialog { width: min(1080px, calc(100% - 24px)); }
.simulation-dialog form { padding: 34px 36px 32px; }
.simulation-dialog .modal-header h2 { font-size: clamp(28px, 3vw, 34px); }
.simulation-dialog .modal-intro { margin: 15px 0 25px; font-size: 14px; }
.simulation-dialog .upload-step { gap: 12px; margin: 21px 0 12px; }
.simulation-dialog .upload-step > span { width: 31px; height: 31px; font-size: 13px; }
.simulation-dialog .upload-step strong { font-size: 14px; }
.simulation-dialog .upload-step small { font-size: 12px; }
.simulation-dialog .simulation-dropzone { min-height: 154px; gap: 7px; border-radius: 16px; }
.simulation-dialog .drop-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 24px; }
.simulation-dialog .dropzone strong { font-size: 15px; }
.simulation-dialog .dropzone small { font-size: 12px; }
.simulation-dialog .simulation-fields { gap: 15px 18px; }
.simulation-dialog .simulation-field { gap: 8px; font-size: 13px; }
.simulation-dialog .simulation-field input:not([type="radio"]), .simulation-dialog .simulation-field select { min-height: 50px; padding: 0 13px; border-radius: 11px; font-size: 13px; }
.simulation-dialog .simulation-field textarea { min-height: 104px; padding: 13px; border-radius: 11px; font-size: 13px; }
.simulation-dialog .choice-row { gap: 9px; }
.simulation-dialog .choice-row label { padding: 11px 13px; border-radius: 10px; font-size: 13px; }
.simulation-dialog .field-help, .simulation-dialog .ral-preview-message { font-size: 11px; }
.simulation-dialog .simulation-disclaimer { margin-top: 21px; padding: 13px 15px; border-radius: 12px; font-size: 12px; }
.simulation-dialog .form-actions { margin-top: 26px; gap: 11px; }
.simulation-dialog .form-actions button { min-height: 54px; padding: 0 21px; font-size: 14px; }
.simulation-result-dialog { width: min(1440px, calc(100% - 32px)); height: calc(100dvh - 32px); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 25px; background: #fffdfc; box-shadow: 0 30px 85px rgba(61, 28, 39, .32); }
.simulation-result-dialog::backdrop { background: rgba(42, 25, 32, .58); backdrop-filter: blur(5px); }
.simulation-result-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; padding: 22px; }
.simulation-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.simulation-result-header .eyebrow { margin: 0 0 4px; }
.simulation-result-header h2 { margin: 0; font-size: clamp(24px, 3vw, 31px); letter-spacing: -.045em; }
.simulation-result-actions { display: flex; align-items: center; gap: 9px; }
.simulation-download { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; text-decoration: none; white-space: nowrap; }
.simulation-result-image-frame { display: grid; min-height: 0; place-items: center; overflow: hidden; border-radius: 17px; background: #29272a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.simulation-result-image-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.simulation-refinement { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: end; margin-top: 16px; padding: 18px; border: 1px solid #eadce0; border-radius: 16px; background: #fff8fa; }
.simulation-refinement > div { grid-column: 1 / -1; }
.simulation-refinement .eyebrow { margin: 0 0 3px; }
.simulation-refinement h3 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.simulation-revision-field { display: grid; gap: 6px; color: #554c4f; font-size: 12px; font-weight: 800; }
.simulation-revision-field textarea { width: 100%; min-height: 90px; padding: 10px; resize: vertical; border: 1px solid #dcd3cf; border-radius: 10px; outline: 0; color: var(--ink); background: #fff; font: inherit; font-weight: 500; line-height: 1.45; }
.simulation-revision-field textarea:focus { border-color: #c26a88; box-shadow: 0 0 0 3px var(--wine-soft); }
.simulation-revision-button { min-height: 52px; white-space: nowrap; }

@media (max-width: 720px) {
  .simulation-result-dialog { width: min(100% - 14px, 1440px); height: calc(100dvh - 14px); border-radius: 18px; }.simulation-result-shell { padding: 16px; }.simulation-result-header { gap: 10px; }.simulation-result-actions { gap: 6px; }.simulation-download { min-height: 40px; padding: 0 11px; font-size: 11px; }.simulation-refinement { grid-template-columns: 1fr; padding: 15px; }.simulation-revision-button { width: 100%; }
}

@media (max-width: 720px) {
  .simulation-dialog form { padding: 25px 22px; }
  .simulation-dialog .modal-header h2 { font-size: 27px; }
}

@media (max-width: 700px) {
  .login-shell { padding: 12px; }.login-brand-header { min-height: 88px; padding: 15px 17px; gap: 13px; border-radius: 19px; }.login-brand-header::after { width: 48%; background-size: 490px auto; }.login-logo-wrap { width: 160px; height: 54px; }.login-logo-wrap img { width: 241px; transform: translate(-42px, -34px); }.login-header-divider { height: 34px; }.login-app-label small { display: none; }.login-app-label strong { font-size: 19px; }.login-content { grid-template-columns: 1fr; min-height: 0; margin-top: 12px; border-radius: 19px; }.login-story { min-height: 198px; padding: 30px; }.login-story h2 { font-size: 29px; }.login-story > span:last-child { margin-top: 11px; font-size: 13px; }.login-story-icon { display: none; }.login-access { padding: 30px; }.login-access-heading h2 { font-size: 25px; }
}

@media (max-width: 500px) {
  .app-label { display: none; }.header-actions { margin-left: auto; }.brand-logo-wrap { width: 174px; height: 56px; }.brand-logo-wrap img { width: 260px; transform: translate(-45px, -36px); }.login-dialog { width: min(100% - 14px, 520px); }.login-shell { padding: 8px; }.login-brand-header { min-height: 82px; padding: 12px; }.login-logo-wrap { width: 150px; height: 51px; }.login-logo-wrap img { width: 230px; transform: translate(-40px, -32px); }.login-header-divider { display: none; }.login-app-label { margin-left: auto; }.login-app-label strong { font-size: 17px; }.login-story { display: none; }.login-access { padding: 27px 21px 22px; }.login-access-heading h2 { font-size: 23px; }.login-access-intro { margin-bottom: 17px; }.login-close { width: 33px; height: 33px; }.login-submit { min-height: 48px; }
}

/* Sans session, l'application ne laisse apparaître que l'écran de connexion. */
body.auth-pending { background: #fff; }
body.auth-pending .page-shell,
body.auth-pending > .details-drawer,
body.auth-pending > .drawer-backdrop,
body.auth-pending > dialog:not(.login-dialog),
body.auth-pending > .toast { display: none !important; }
body.auth-pending .login-dialog::backdrop { background: #fff; backdrop-filter: none; }

/* Vues de la bibliothèque */
.media-grid.media-list-view { grid-template-columns: 1fr; gap: 10px; }
.media-list-view .media-card { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); min-height: 152px; }
.media-list-view .media-thumb { height: 100%; min-height: 150px; aspect-ratio: auto; }
.media-list-view .media-info { display: grid; align-content: center; padding: 17px 20px; }
.media-list-view .media-info h2 { font-size: 16px; }
.media-list-view .media-info p { margin-top: 6px; font-size: 12px; }
.media-list-view .media-meta { max-width: 430px; margin-top: 14px; font-size: 11px; }

.media-info .media-characteristics, .media-list-view .media-info .media-characteristics { margin: 0; }

@media (max-width: 840px) {
  .media-grid.media-list-view { grid-template-columns: 1fr; }
  .media-list-view .media-card { grid-template-columns: 170px minmax(0, 1fr); }
  .media-list-view .media-thumb { min-height: 128px; }
}

@media (max-width: 500px) {
  .media-list-view .media-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 104px; }
  .media-list-view .media-thumb { min-height: 102px; }
  .media-list-view .media-info { padding: 11px; }
  .media-list-view .media-info h2 { font-size: 13px; }
  .media-list-view .media-info p { font-size: 10px; }
  .media-list-view .media-meta { margin-top: 8px; font-size: 9px; }
}

/* Sélection, téléchargement et diaporama de la bibliothèque. */
.library-toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
.selection-mode-button.is-active { color: #fff; background: var(--wine); box-shadow: 0 8px 18px rgba(135, 5, 45, .18); }
.selection-actions { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid #e7cad4; border-radius: 14px; background: #fff8fa; }
.selection-actions > span { padding: 0 4px; color: var(--wine); font-size: 11px; font-weight: 800; white-space: nowrap; }
.selection-actions .compact-button { min-height: 38px; }
.filters-footer { position: sticky; top: 0; z-index: 3; display: grid; gap: 9px; }
.filters-footer .secondary-button { width: 100%; min-height: 42px; font-size: 12px; }
.media-card { position: relative; }
.selection-mode .media-card { cursor: pointer; }
.selection-mode .media-card:hover { transform: none; }
.media-card.is-selected { border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-soft), 0 12px 24px rgba(88,50,47,.10); }
.selection-check { position: absolute; z-index: 5; top: 11px; right: 11px; display: grid; width: 27px; height: 27px; place-items: center; color: #fff; border: 2px solid #fff; border-radius: 50%; background: rgba(49, 39, 42, .6); box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 16px; font-weight: 800; }
.media-card.is-selected .selection-check { background: var(--wine); }
.slideshow-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #110b0d; }
.slideshow-dialog::backdrop { background: #110b0d; }
.slideshow-shell { display: grid; grid-template-rows: 40px minmax(0, 1fr); width: 100%; height: 100dvh; max-height: 100dvh; min-height: 0; overflow: hidden; padding: 18px; }
.slideshow-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; min-height: 0; padding: 0 0 14px; color: #fff; }
.slideshow-header p { margin: 0; font-size: 13px; font-weight: 800; }
.slideshow-header > span { color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; }
.slideshow-header .icon-button { color: #fff; background: rgba(255,255,255,.14); }
.slideshow-header .icon-button:hover { background: rgba(255,255,255,.24); }
.slideshow-image-wrap { position: relative; display: grid; width: 100%; height: calc(100dvh - 76px); min-width: 0; min-height: 0; max-height: calc(100dvh - 76px); place-items: center; overflow: hidden; border-radius: 18px; background: #050304; }
/* Chaque photo occupe le même cadre, quelle que soit sa résolution d’origine.
   Les éventuelles marges noires évitent tout recadrage de la réalisation. */
.slideshow-image-wrap img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.slideshow-nav { position: absolute; z-index: 1; top: 50%; display: grid; width: 46px; height: 46px; place-items: center; padding: 0; transform: translateY(-50%); color: #fff; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; background: rgba(17,11,13,.54); box-shadow: 0 5px 18px rgba(0,0,0,.26); font-size: 28px; line-height: 1; transition: background .18s ease, opacity .18s ease; }
.slideshow-nav:hover:not(:disabled) { background: rgba(135,5,45,.9); }
.slideshow-nav:disabled { cursor: default; opacity: .32; }
.slideshow-nav-previous { left: 18px; }
.slideshow-nav-next { right: 18px; }

@media (max-width: 840px) {
  .selection-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 500px) {
  .selection-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .selection-actions > span { grid-column: span 2; text-align: center; }
  .selection-actions .compact-button { width: 100%; }
  .slideshow-shell { grid-template-rows: 34px minmax(0, 1fr); padding: 10px; }
  .slideshow-header { gap: 8px; padding-bottom: 10px; }
  .slideshow-header p { font-size: 11px; }
  .slideshow-nav { width: 38px; height: 38px; font-size: 23px; }
  .slideshow-nav-previous { left: 10px; }
  .slideshow-nav-next { right: 10px; }
}

body:has(.slideshow-dialog[open]) { overflow: hidden; }