/* ============================================================================ * SuperAndy — onglet « Ambiances » (catalogue Andy). Port des styles admin Andy * (admin-ambiances.css + parties themePrev de admin-customizations.css). * * Les `--palette-*` sont MAPPÉS sur les tokens SuperAndy au niveau :root (couvre * aussi les modaux, montés sur ) → le CHROME (tuiles/éditeur/calendrier) * suit le thème SuperAndy. L'APERÇU pose ses PROPRES `--*` en inline sur * `.adminAmbiance-previewFrame` (valuesToStyleVars) → il montre l'ambiance réelle. * ========================================================================== */ :root { --palette-bg: var(--bg); --palette-surface: var(--panel); --palette-elevated: var(--panel2); --palette-border: var(--border); --palette-text: var(--text); --palette-muted: var(--soft); --palette-primary: var(--accent); --palette-on-primary: #fff; --palette-brand: var(--accent2); --palette-on-brand: #fff; --palette-danger: var(--ko); } .adminAmbiance-root { display: flex; flex-direction: column; gap: 6px; } .saAmb-root { container: saAmb / inline-size; } .adminAmbiance-empty { padding: 28px 18px; text-align: center; color: var(--palette-muted); background: var(--palette-surface); border: 1px dashed var(--palette-border); border-radius: 12px; font-size: 14px; } .adminAmbiance-hint { font-size: 12px; color: var(--palette-muted); margin: 0; line-height: 1.4; } .adminAmbiance-err { font-size: 12px; color: var(--palette-danger); margin: 0; } /* ── Layout 2 colonnes ─────────────────────────────────────────────────────── */ .adminAmbiance-split { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.05fr); gap: 18px; align-items: start; } .adminAmbiance-config { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .adminAmbiance-previewCol { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } @container saAmb (max-width: 900px) { .adminAmbiance-split { grid-template-columns: 1fr; } .adminAmbiance-previewCol { position: static; } } /* ── Boutons ───────────────────────────────────────────────────────────────── */ .adminAmbiance-primaryBtn, .adminAmbiance-secondaryBtn, .adminAmbiance-ghostBtn { border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: filter .12s ease, background .12s ease; } .adminAmbiance-primaryBtn { background: var(--palette-primary); color: var(--palette-on-primary); } .adminAmbiance-primaryBtn:hover:not(:disabled) { filter: brightness(1.06); } .adminAmbiance-secondaryBtn { background: var(--palette-surface); color: var(--palette-text); border-color: var(--palette-border); } .adminAmbiance-ghostBtn { background: transparent; color: var(--palette-muted); border-color: var(--palette-border); } .adminAmbiance-primaryBtn:disabled, .adminAmbiance-secondaryBtn:disabled, .adminAmbiance-ghostBtn:disabled { opacity: .55; cursor: default; } .adminAmbiance-actionBtn { border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--palette-elevated); color: var(--palette-text); border: 1px solid var(--palette-border); } .adminAmbiance-actionBtn.is-primary { background: var(--palette-primary); color: var(--palette-on-primary); border-color: transparent; } .adminAmbiance-actionBtn.is-danger { color: var(--palette-danger); border-color: color-mix(in srgb, var(--palette-danger) 40%, transparent); } .adminAmbiance-actionBtn:disabled { opacity: .55; cursor: default; } .adminAmbiance-iconBtn { background: none; border: 1px solid var(--palette-border); color: var(--palette-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 3px 9px; border-radius: 8px; } .adminAmbiance-iconBtn:hover { border-color: var(--palette-primary); color: var(--palette-text); } /* ── Tuiles ────────────────────────────────────────────────────────────────── */ .adminAmbiance-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .adminAmbiance-tile { background: var(--palette-surface); border: 1px solid var(--palette-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .12s ease, box-shadow .12s ease; cursor: pointer; } .adminAmbiance-tile.is-selected { border-color: var(--palette-primary); box-shadow: 0 0 0 1px var(--palette-primary); } .adminAmbiance-tileBanner { height: 74px; position: relative; } .adminAmbiance-tileBadge { position: absolute; top: 8px; right: 8px; background: var(--palette-primary); color: var(--palette-on-primary); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; } .adminAmbiance-tileBadge--hidden { background: rgba(0,0,0,.55); color: #fff; } .adminAmbiance-tileBody { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .adminAmbiance-tileRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .adminAmbiance-tileName { font-weight: 700; color: var(--palette-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adminAmbiance-tileDots { display: inline-flex; gap: 4px; flex: none; } .adminAmbiance-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--palette-text) 18%, transparent); } .adminAmbiance-tilePeriod { font-size: 12px; color: var(--palette-muted); } .adminAmbiance-tileActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } /* ── Éditeur ───────────────────────────────────────────────────────────────── */ .adminAmbiance-editor { display: flex; flex-direction: column; gap: 14px; } .adminAmbiance-editorActions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; } .adminAmbiance-field, .adminAmbiance-colorField { display: flex; flex-direction: column; gap: 6px; } .adminAmbiance-fieldLabel { font-size: 12px; font-weight: 600; color: var(--palette-muted); } .adminAmbiance-textInput, .adminAmbiance-hex { border: 1px solid var(--palette-border); background: var(--palette-bg); color: var(--palette-text); border-radius: 9px; padding: 8px 10px; font-size: 14px; width: 100%; } .adminAmbiance-fieldGroup { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--palette-border); border-radius: 12px; background: var(--palette-surface); } .adminAmbiance-groupLabel { font-size: 13px; font-weight: 700; color: var(--palette-text); } .adminAmbiance-colorPair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .adminAmbiance-colorRow { display: flex; gap: 8px; align-items: center; } .adminAmbiance-colorRow input[type="color"] { width: 38px; height: 34px; padding: 0; border: 1px solid var(--palette-border); border-radius: 8px; background: none; cursor: pointer; } .adminAmbiance-hex { width: auto; flex: 1; font-family: ui-monospace, monospace; text-transform: uppercase; } .adminAmbiance-visRow { display: flex; align-items: center; gap: 10px; cursor: pointer; } .adminAmbiance-visRow input { width: 18px; height: 18px; accent-color: var(--palette-primary); } .adminAmbiance-kindRow { display: flex; flex-wrap: wrap; gap: 6px; } .adminAmbiance-kindBtn { border: 1px solid var(--palette-border); background: var(--palette-bg); color: var(--palette-text); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .adminAmbiance-kindBtn.is-on { background: var(--palette-primary); color: var(--palette-on-primary); border-color: transparent; } .adminAmbiance-gradient { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .adminAmbiance-gradient .adminAmbiance-field:last-child { grid-column: 1 / -1; } .adminAmbiance-images { display: flex; flex-direction: column; gap: 10px; } .adminAmbiance-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .adminAmbiance-thumb { position: relative; width: 72px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--palette-border); } .adminAmbiance-thumb img { width: 100%; height: 100%; object-fit: cover; } .adminAmbiance-thumbDel { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; line-height: 1; font-size: 13px; } /* Uploader bannière : dropzone + recadrage */ .adminAmbiance-bannerCrop { display: flex; flex-direction: column; gap: 10px; } .adminAmbiance-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 14px; text-align: center; cursor: pointer; border: 1.5px dashed var(--palette-border); border-radius: 12px; background: var(--palette-bg); color: var(--palette-muted); transition: border-color .12s, background .12s, color .12s; } .adminAmbiance-dropzone:hover, .adminAmbiance-dropzone.is-over { border-color: var(--palette-primary); color: var(--palette-text); background: color-mix(in srgb, var(--palette-primary) 7%, var(--palette-bg)); } .adminAmbiance-dropzone.is-over { border-style: solid; } .adminAmbiance-dropzoneText { font-size: 13px; font-weight: 600; } .adminAmbiance-dropzoneText strong { color: var(--palette-primary); } .adminAmbiance-dropzoneHint { font-size: 11px; } .adminAmbiance-bannerViewport { position: relative; overflow: hidden; border-radius: 12px; align-self: center; max-width: 100%; background: var(--palette-bg); border: 1px solid var(--palette-border); cursor: grab; touch-action: none; } .adminAmbiance-bannerViewport:active { cursor: grabbing; } .adminAmbiance-bannerCropMask { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--palette-primary) 55%, transparent); border-radius: 12px; pointer-events: none; } .adminAmbiance-advancedToggle { background: none; border: none; color: var(--palette-primary); font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; padding: 0; } .adminAmbiance-advanced { display: flex; flex-direction: column; gap: 10px; } .adminAmbiance-advModeRow { display: flex; gap: 8px; } .adminAmbiance-advModeBtn { flex: 1; border: 1px solid var(--palette-border); background: var(--palette-bg); color: var(--palette-text); border-radius: 9px; padding: 7px; font-size: 13px; cursor: pointer; } .adminAmbiance-advModeBtn.is-on { background: var(--palette-primary); color: var(--palette-on-primary); border-color: transparent; } .adminAmbiance-varGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; } /* Champ de variable (ThemeVarField) */ .adminAmbiance-varField { border: 1px solid color-mix(in srgb, var(--palette-border) 60%, transparent); border-radius: 12px; padding: 10px; background: color-mix(in srgb, var(--palette-text) 2%, var(--palette-surface)); display: flex; flex-direction: column; gap: 6px; } .adminAmbiance-varHead { display: flex; align-items: center; gap: 8px; } .adminAmbiance-varKey { font-size: 11px; font-weight: 700; color: var(--palette-text); margin-right: auto; word-break: break-all; } .adminAmbiance-varReset { font: inherit; font-size: 11px; background: none; border: none; cursor: pointer; color: var(--palette-primary); padding: 0; } .adminAmbiance-varDesc { margin: 0; font-size: 11px; line-height: 1.35; color: var(--palette-muted); } .adminAmbiance-varTabs { display: flex; flex-wrap: wrap; gap: 4px; } .adminAmbiance-varTab { font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--palette-border); background: color-mix(in srgb, var(--palette-text) 4%, var(--palette-surface)); color: var(--palette-muted); } .adminAmbiance-varTab.is-on { background: color-mix(in srgb, var(--palette-primary) 16%, var(--palette-surface)); border-color: var(--palette-primary); color: var(--palette-text); } .adminAmbiance-varColorMode { display: flex; align-items: center; gap: 8px; } .adminAmbiance-varColorBig { width: 46px; height: 38px; flex-shrink: 0; padding: 0; border: 1px solid var(--palette-border); border-radius: 10px; background: none; cursor: pointer; } .adminAmbiance-varColorSmall { width: 34px; height: 34px; padding: 0; border: 1px solid var(--palette-border); border-radius: 8px; background: none; cursor: pointer; } .adminAmbiance-varTextInput { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--palette-border); background: var(--palette-surface); color: var(--palette-text); } .adminAmbiance-varBuilder { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--palette-border); border-radius: 10px; background: color-mix(in srgb, var(--palette-text) 2%, var(--palette-surface)); } .adminAmbiance-varGradPreview { height: 28px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--palette-text) 12%, transparent); } .adminAmbiance-varRange { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--palette-muted); } .adminAmbiance-varRange input[type="range"] { flex: 1; min-width: 0; accent-color: var(--palette-primary); } .adminAmbiance-varNum { min-width: 42px; text-align: right; font-weight: 700; color: var(--palette-text); } .adminAmbiance-varNumInput { width: 56px; font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 8px; text-align: center; border: 1px solid var(--palette-border); background: var(--palette-surface); color: var(--palette-text); } .adminAmbiance-varStop { display: flex; align-items: center; gap: 6px; } .adminAmbiance-varColorValue { display: flex; align-items: center; gap: 6px; } .adminAmbiance-varMiniBtn { font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--palette-border); background: color-mix(in srgb, var(--palette-text) 5%, var(--palette-surface)); color: var(--palette-text); } .adminAmbiance-varMiniBtn:disabled { opacity: .4; cursor: default; } /* ── Modaux (éditeur large + calendrier) ───────────────────────────────────── */ .modal.adminAmbiance-wideModal { width: min(1120px, 96vw); } .modal.adminAmbiance-calModal { width: min(1180px, 96vw); } .adminAmbiance-editorModal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 18px; align-items: start; } .adminAmbiance-editorModalForm { min-width: 0; } .adminAmbiance-editorModalPreview { min-width: 0; position: sticky; top: 0; } @media (max-width: 860px) { .adminAmbiance-editorModal { grid-template-columns: 1fr; } .adminAmbiance-editorModalPreview { position: static; } } /* ── Aperçu ────────────────────────────────────────────────────────────────── */ .adminAmbiance-preview { border: 1px solid var(--palette-border); border-radius: 14px; overflow: hidden; background: var(--palette-surface); } .adminAmbiance-previewHead { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--palette-border); } .adminAmbiance-previewTitle { font-weight: 700; font-size: 13px; color: var(--palette-text); } .adminAmbiance-modeToggle { display: inline-flex; gap: 2px; background: var(--palette-bg); border: 1px solid var(--palette-border); border-radius: 999px; padding: 2px; cursor: pointer; } .adminAmbiance-modeOpt { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--palette-muted); } .adminAmbiance-modeOpt.is-on { background: var(--palette-primary); color: var(--palette-on-primary); } .adminAmbiance-previewFrame { max-height: 74vh; overflow-y: auto; background: var(--palette-bg); container: ambprev / inline-size; } .adminAmbiance-previewHome.page_home { max-width: none; padding: 12px 12px 0; } .adminAmbiance-previewBody { padding: 4px; } /* Bannière d'accueil reproduite (mêmes règles que .page_home .header) */ .adminAmbiance-header { position: relative; width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 2px 2px 6px 1px #00000029; background: linear-gradient(135deg, var(--palette-brand) 0%, var(--palette-primary) 100%); } .adminAmbiance-header.has-ambiance-image { min-height: 150px; display: flex; align-items: flex-end; } .adminAmbiance-header.has-ambiance-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.46) 100%); pointer-events: none; } .adminAmbiance-header .text { position: relative; z-index: 1; padding: 26px 26px 30px; } .adminAmbiance-header .text .top { display: block; font-size: 17px; color: #fff; margin-bottom: 5px; } .adminAmbiance-header .text .name { display: block; color: #fff; font-size: clamp(26px, 7vw, 34px); font-weight: 800; word-break: break-word; } /* ── Calendrier ────────────────────────────────────────────────────────────── */ .adminAmbiance-calendar { display: flex; flex-direction: column; gap: 14px; width: 100%; } .adminAmbiance-calToolbar { display: flex; align-items: center; gap: 8px; } .adminAmbiance-calZoomVal { font-size: 13px; font-weight: 700; color: var(--palette-text); min-width: 32px; text-align: center; } .adminAmbiance-calScroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; cursor: grab; touch-action: pan-x; } .adminAmbiance-calScroller.is-panning { cursor: grabbing; } .adminAmbiance-calZoomArea { min-width: 100%; display: flex; flex-direction: column; gap: 4px; } .adminAmbiance-calMonths { position: relative; height: 16px; } .adminAmbiance-calMonth { position: absolute; font-size: 11px; color: var(--palette-muted); transform: translateX(2px); } .adminAmbiance-calTrack { position: relative; height: 124px; background: var(--palette-bg); border: 1px solid var(--palette-border); border-radius: 10px; overflow: hidden; } .adminAmbiance-calGrid { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--palette-text) 8%, transparent); } .adminAmbiance-calBar { position: absolute; top: 8px; height: 30px; border-radius: 8px; display: flex; align-items: center; color: #fff; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.2); touch-action: none; min-width: 14px; } .adminAmbiance-calBar.is-wrap { cursor: default; opacity: .92; } .adminAmbiance-calBar.is-deleted { background: repeating-linear-gradient(45deg, #9aa3ad, #9aa3ad 6px, #868f99 6px, #868f99 12px) !important; } .adminAmbiance-calBarLabel { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; padding: 0 8px 0 13px; font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45); } .adminAmbiance-calHandle { width: 11px; align-self: stretch; cursor: ew-resize; flex: none; touch-action: none; } .adminAmbiance-calHandle.is-left { border-radius: 8px 0 0 8px; } .adminAmbiance-calHandle.is-right { border-radius: 0 8px 8px 0; margin-left: auto; } .adminAmbiance-calRows { display: flex; flex-direction: column; gap: 8px; } .adminAmbiance-calRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .adminAmbiance-calRow.is-deleted { padding: 4px 6px; border-radius: 8px; background: color-mix(in srgb, var(--palette-danger) 8%, transparent); } .adminAmbiance-calRowDot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .adminAmbiance-calRowSep { color: var(--palette-muted); } .adminAmbiance-calRowAmb { flex: 1 1 190px; min-width: 150px; } .adminAmbiance-calRowLabel { flex: 1 1 150px; min-width: 120px; } .adminAmbiance-calLabelInput { width: 100%; background: var(--palette-bg); border: 1px solid var(--palette-border); border-radius: 8px; color: var(--palette-text); padding: 7px 9px; font: inherit; font-size: 13px; } .adminAmbiance-calAmbSel, .adminAmbiance-calDateSel { width: 100%; } .adminAmbiance-dateSel { display: inline-flex; gap: 6px; flex: none; } .adminAmbiance-dateSel > select:first-child { width: 66px; } .adminAmbiance-dateSel > select:last-child { width: 96px; } /* ============================================================================ * Aperçu — florilège d'UI (themePrev-*). Les variables lues ici (--palette-*, * --navbar-*, --chat-*, --btn-*, --posts-*, …) proviennent de l'INLINE posé sur * `.adminAmbiance-previewFrame` (263 variables du thème résolu de l'ambiance). * ========================================================================== */ .themePrev-surface { background: var(--palette-bg); color: var(--palette-text); border: 1px solid color-mix(in srgb, var(--palette-text) 10%, transparent); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 18px; font-size: var(--size-text, 16px); --admin-surface: var(--palette-surface); --admin-elevated: var(--palette-elevated); } .themePrev-section { display: flex; flex-direction: column; gap: 8px; } .themePrev-sectionTitle { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--palette-muted); } /* Navigation desktop */ .themePrev-deskNav { background: var(--navbar-dekstop-bg, var(--palette-surface)); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; } .themePrev-deskNavHead { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; } .themePrev-deskNavLogo { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--navbar-dekstop-text-color-first, var(--palette-primary)) 25%, transparent); flex-shrink: 0; } .themePrev-deskNavHeadTexts { display: flex; flex-direction: column; min-width: 0; } .themePrev-deskNavTitle { font-weight: 700; font-size: 14px; color: var(--navbar-dekstop-text-color-first, var(--palette-text)); } .themePrev-deskNavDesc { font-size: 11px; color: var(--navbar-dekstop-text-color-second, var(--palette-muted)); } .themePrev-deskNavSep { height: 1px; background: var(--navbar-dekstop-sep-color, var(--palette-border)); margin: 4px 0; } .themePrev-deskNavBtn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; position: relative; color: var(--navbar-dekstop-text-color-second, var(--palette-muted)); font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, color .12s; } .themePrev-deskNavBtn:hover { background: var(--navbar-dekstop-btn-bg-active, color-mix(in srgb, var(--palette-primary) 12%, transparent)); color: var(--navbar-dekstop-text-color-first, var(--palette-text)); } .themePrev-deskNavBtn.is-active { background: var(--navbar-dekstop-btn-bg-active, color-mix(in srgb, var(--palette-primary) 14%, transparent)); border-color: var(--navbar-dekstop-btn-border-active, transparent); color: var(--navbar-dekstop-text-color-first, var(--palette-text)); } .themePrev-deskNavBtn.is-active .themePrev-deskNavIcon { color: var(--navbar-dekstop-text-color-first, var(--palette-primary)); } .themePrev-deskNavIcon { display: inline-flex; color: inherit; } .themePrev-navBadge { margin-left: auto; background: var(--palette-danger); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; } /* Sélecteur glissant (reproduction) */ .themePrev-seg { --seg-w: 33.33%; } .themePrev-segTrack { position: relative; display: flex; background: var(--palette-elevated); border-radius: 999px; padding: 4px; } .themePrev-segIndicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: var(--seg-w); border-radius: 999px; background: var(--palette-primary); transition: transform .22s ease; } .themePrev-segBtn { position: relative; z-index: 1; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 4px; color: var(--palette-muted); } .themePrev-segBtn.is-selected { color: var(--palette-on-primary); } /* Stories (re-scope fidèle) */ .themePrev-surface .stories { display: flex; gap: 6px; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px 0; } .themePrev-surface .stories::-webkit-scrollbar { display: none; } .themePrev-surface .stories .story { display: inline-block; cursor: pointer; flex: 0 0 auto; } .themePrev-surface .stories .story .flexer { display: flex; align-items: center; flex-direction: column; width: 96px; } .themePrev-surface .stories .story .round { display: table; padding: 3px; border-radius: 50%; background-color: #22c55e; } .themePrev-surface .stories .story .round.round--story { background: conic-gradient(from 200deg, #f9508f, #f59e0b, #a855f7, #f9508f); } .themePrev-surface .stories .story .round .elmt { width: 70px; height: 70px; border: 3px solid var(--palette-surface, #fff); border-radius: 50%; background-color: #2a2f3a; background-repeat: no-repeat; background-size: cover; background-position: center; } .themePrev-surface .stories .story .title { display: block; text-align: center; width: 100%; margin-top: 6px; color: var(--palette-text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Contrôles */ .themePrev-card { background: var(--palette-surface); border-radius: var(--posts-card-radius, 18px); padding: 14px; border: 1px solid color-mix(in srgb, var(--palette-border) 40%, transparent); display: flex; flex-direction: column; gap: 10px; } .themePrev-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .themePrev-row--mid { justify-content: space-between; } .themePrev-btn { font: inherit; font-weight: 600; cursor: pointer; padding: 10px 16px; border-radius: var(--btn-main-radius, 14px); background: var(--btn-main-bg, var(--palette-elevated)); color: var(--btn-main-color, var(--palette-text)); border: 1px solid var(--btn-main-border, var(--palette-border)); } .themePrev-btn:hover { background: var(--btn-main-hover-bg, var(--palette-elevated)); color: var(--btn-main-hover-color, var(--palette-text)); } .themePrev-btn--active { background: var(--btn-main-active-bg, var(--palette-primary)); color: var(--btn-main-active-color, var(--palette-on-primary)); border-color: var(--btn-main-active-border, transparent); } .themePrev-input { width: 100%; font: inherit; font-size: 14px; padding: 11px 13px; border-radius: var(--input-text-main-radius, 14px); background: var(--input-text-main-bg, var(--palette-elevated)); color: var(--input-text-main-color, var(--palette-text)); border: 1px solid var(--input-text-main-border-color-filled, transparent); } .themePrev-input::placeholder { color: var(--input-text-main-placeholder, var(--palette-muted)); } .themePrev-check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--checkbox-color, var(--palette-text)); font-size: 13px; } .themePrev-checkBox { width: 38px; height: 22px; border-radius: 999px; background: var(--checkbox-checker-bg, var(--palette-elevated)); display: flex; align-items: center; padding: 2px; transition: background .12s; } .themePrev-checkDot { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--palette-text) 30%, transparent); transition: transform .15s, background .12s; } .themePrev-checkBox.is-on { background: color-mix(in srgb, var(--checkbox-checker-elmt-bg, var(--palette-primary)) 30%, var(--checkbox-checker-bg, var(--palette-elevated))); } .themePrev-checkBox.is-on .themePrev-checkDot { transform: translateX(16px); background: var(--checkbox-checker-elmt-bg, var(--palette-primary)); } .themePrev-link { color: var(--a-color, var(--palette-text)); text-decoration: underline; text-decoration-color: var(--a-underline-color, var(--palette-text)); font-size: 13px; } .themePrev-link:hover { color: var(--a-hover-color, var(--palette-primary)); } /* Fil d'actualité (reproduction PostCard) */ .themePrev-feed { display: flex; flex-direction: column; gap: 12px; } .themePrev-post { background: var(--palette-surface); border-radius: var(--posts-card-radius, 18px); border: 1px solid color-mix(in srgb, var(--palette-border) 40%, transparent); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .themePrev-postHead { display: flex; align-items: center; gap: 10px; } .themePrev-postAvatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; } .themePrev-postWho { display: flex; flex-direction: column; min-width: 0; flex: 1; } .themePrev-postName { font-weight: 700; font-size: 14px; color: var(--palette-text); } .themePrev-postTime { font-size: 11px; color: var(--palette-muted); } .themePrev-postPin { flex: 0 0 auto; } .themePrev-postText { margin: 0; font-size: 13px; color: var(--palette-text); line-height: 1.45; } .themePrev-postBar { display: flex; gap: 10px; border-top: 1px solid color-mix(in srgb, var(--palette-border) 50%, transparent); padding-top: 8px; } .themePrev-postAction { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--palette-muted); padding: 4px 8px; border-radius: 10px; } .themePrev-postAction.is-on { color: var(--palette-danger); } /* Messagerie */ .themePrev-chatGrid { display: grid; grid-template-columns: 240px 1fr; gap: 10px; } .themePrev-convList { background: var(--chat-list-bg, var(--palette-surface)); border-radius: 14px; border: 1px solid var(--chat-list-divider, var(--palette-border)); overflow: hidden; display: flex; flex-direction: column; } .themePrev-convItem { display: flex; gap: 11px; align-items: center; padding: 11px 12px; cursor: pointer; border-bottom: 1px solid var(--chat-list-divider, var(--palette-border)); border-left: 3px solid transparent; } .themePrev-convItem:last-child { border-bottom: none; } .themePrev-convItem.is-active { background: var(--chat-item-active-bg, color-mix(in srgb, var(--palette-primary) 8%, transparent)); border-left-color: var(--chat-item-active-border, var(--palette-primary)); } .themePrev-convAvatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .themePrev-convBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .themePrev-convRow { display: flex; align-items: center; gap: 6px; justify-content: space-between; } .themePrev-convName { font-weight: 600; font-size: 13.5px; color: var(--chat-item-title-color, var(--palette-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themePrev-convItem.is-unread .themePrev-convName { font-weight: 800; } .themePrev-convTime { font-size: 11px; color: var(--chat-item-time-color, var(--palette-muted)); flex-shrink: 0; } .themePrev-convPreview { font-size: 12px; color: var(--chat-item-preview-color, var(--palette-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themePrev-convBadge { background: var(--chat-item-unread-bubble, var(--palette-primary)); color: var(--chat-item-unread-color, var(--palette-on-primary)); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center; flex-shrink: 0; } .themePrev-thread { background: var(--chat-thread-bg, var(--palette-surface)); border: 1px solid var(--chat-shell-border, var(--palette-border)); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; min-height: 260px; } .themePrev-threadHead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--chat-thread-header-bg, var(--palette-elevated)); border-bottom: 1px solid var(--chat-thread-header-border, var(--palette-border)); } .themePrev-threadAvatar { width: 30px; height: 30px; border-radius: 50%; background: var(--posts-avatar-palette-2, var(--palette-primary)); flex-shrink: 0; } .themePrev-threadTitle { font-weight: 700; font-size: 14px; color: var(--chat-thread-header-title, var(--palette-text)); } .themePrev-threadMsgs { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .themePrev-msg { display: flex; gap: 6px; align-items: flex-end; } .themePrev-msg--mine { justify-content: flex-end; } .themePrev-msgAvatar { width: 24px; height: 24px; border-radius: 50%; background: var(--posts-avatar-palette-1, var(--palette-primary)); flex-shrink: 0; } .themePrev-bubble { max-width: 78%; padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; display: inline-flex; flex-direction: column; } .themePrev-bubble--other { background: var(--chat-bubble-other-bg, var(--palette-elevated)); color: var(--chat-bubble-other-color, var(--palette-text)); border: 1px solid var(--chat-bubble-other-border, transparent); } .themePrev-bubble--mine { background: var(--chat-bubble-mine-bg, var(--palette-primary)); color: var(--chat-bubble-mine-color, var(--palette-on-primary)); } .themePrev-bubbleAuthor { font-size: 11px; font-weight: 700; color: var(--chat-bubble-author-color, var(--palette-primary)); margin-bottom: 2px; } .themePrev-bubbleTime { font-size: 10px; color: var(--chat-bubble-time-color, var(--palette-muted)); align-self: flex-end; margin-top: 2px; } .themePrev-bubbleTime--mine { color: var(--chat-bubble-time-mine-color, color-mix(in srgb, var(--palette-on-primary) 80%, transparent)); } .themePrev-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--chat-composer-border, var(--palette-border)); background: var(--chat-composer-bg, var(--palette-surface)); } .themePrev-composerInput { flex: 1; min-width: 0; background: var(--chat-composer-input-bg, var(--palette-elevated)); color: var(--chat-composer-input-color, var(--palette-text)); border: none; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13px; } .themePrev-composerSend { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--chat-composer-send-bg, var(--palette-primary)); color: var(--chat-composer-send-color, var(--palette-on-primary)); cursor: pointer; display: flex; align-items: center; justify-content: center; } @container ambprev (max-width: 470px) { .themePrev-chatGrid { grid-template-columns: 1fr; } } /* Navigation mobile */ .themePrev-mobNavWrap { display: flex; justify-content: center; padding: 6px 0; } .themePrev-mobNav { display: flex; gap: 4px; padding: 8px 10px; border-radius: 24px; background: var(--navbar-mobile-bg, var(--palette-surface)); border: 1px solid var(--navbar-mobile-border, var(--palette-border)); } .themePrev-mobNavBtn { position: relative; width: 46px; height: 42px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--navbar-mobile-color, var(--palette-muted)); } .themePrev-mobNavBtn.is-on { color: var(--navbar-mobile-color-selected, var(--palette-primary)); } .themePrev-mobNavBtn > svg { position: relative; z-index: 1; opacity: .75; transition: transform .2s, opacity .2s; } .themePrev-mobNavBtn.is-on > svg { opacity: 1; transform: scale(1.3); } .themePrev-mobNavIndicator { position: absolute; inset: 0; border-radius: 18px; background: var(--navbar-mobile-idicator-bg, color-mix(in srgb, var(--palette-primary) 16%, transparent)); } /* Dashboard KPIs */ .themePrev-kpiGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; } .themePrev-kpi { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border-radius: 16px; background: var(--palette-surface); border: 1px solid var(--palette-border); box-shadow: 0 1px 2px color-mix(in srgb, var(--palette-text) 6%, transparent); } .themePrev-kpiHead { display: flex; align-items: center; gap: 8px; } .themePrev-kpiIcon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .themePrev-kpiIcon--primary { background: color-mix(in srgb, var(--palette-primary) 12%, transparent); color: var(--palette-primary); } .themePrev-kpiIcon--success { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; } .themePrev-kpiIcon--warn { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; } .themePrev-kpiIcon--danger { background: color-mix(in srgb, var(--palette-danger) 13%, transparent); color: var(--palette-danger); } .themePrev-kpiLabel { font-size: 11px; font-weight: 700; color: var(--palette-muted); text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; } .themePrev-kpiValue { font-size: 22px; font-weight: 800; color: var(--palette-text); line-height: 1.05; } .themePrev-kpiFoot { font-size: 11.5px; font-weight: 600; color: var(--palette-muted); display: inline-flex; align-items: center; gap: 4px; } .themePrev-kpiTrend--up { color: #16a34a; } .themePrev-kpiTrend--down { color: var(--palette-danger); } /* Boutique — liste */ .themePrev-shopList { border: 1px solid var(--palette-border); border-radius: 14px; overflow: hidden; background: var(--palette-surface); } .themePrev-shopHead, .themePrev-shopRow { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 10px; align-items: center; padding: 9px 12px; } .themePrev-shopColR { text-align: right; } .themePrev-shopHead { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--palette-muted); background: color-mix(in srgb, var(--palette-text) 3%, transparent); border-bottom: 1px solid var(--palette-border); } .themePrev-shopRow { border-bottom: 1px solid color-mix(in srgb, var(--palette-border) 60%, transparent); } .themePrev-shopRow:last-child { border-bottom: none; } .themePrev-shopRow.is-folder { background: color-mix(in srgb, var(--palette-text) 3%, transparent); } .themePrev-shopName { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--palette-text); } .themePrev-shopLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themePrev-shopBranch { color: var(--palette-muted); opacity: .7; flex: 0 0 auto; } .themePrev-shopFolderIco { color: var(--palette-primary); display: inline-flex; flex: 0 0 auto; } .themePrev-shopCode { font-size: 10.5px; font-weight: 700; color: var(--palette-muted); background: var(--palette-elevated); border-radius: 8px; padding: 1px 7px; flex: 0 0 auto; } .themePrev-shopPrice { text-align: right; font-size: 13px; font-weight: 700; color: var(--palette-text); } .themePrev-shopBadges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .themePrev-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .themePrev-badge--ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; } .themePrev-badge--info { background: color-mix(in srgb, var(--palette-primary) 12%, transparent); color: var(--palette-primary); } .themePrev-badge--warn { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; } .themePrev-badge--muted { background: var(--palette-elevated); color: var(--palette-muted); } /* Fiche prestation — barre d'onglets icônes (reproduction .admin-iconTabBar) */ .themePrev-prestaCard { border: 1px solid var(--palette-border); border-radius: 16px; overflow: hidden; background: var(--palette-surface); } .themePrev-prestaTabs { display: flex; gap: 4px; overflow-x: auto; padding: 10px 10px 6px; border-bottom: 1px solid var(--palette-border); scrollbar-width: none; } .themePrev-prestaTabs::-webkit-scrollbar { display: none; } .themePrev-prestaTab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font: inherit; padding: 6px 10px; border-radius: 12px; color: var(--palette-muted); position: relative; } .themePrev-prestaTab.is-active { color: var(--palette-primary); background: color-mix(in srgb, var(--palette-primary) 10%, transparent); } .themePrev-prestaTabIco { display: inline-flex; } .themePrev-prestaTabLabel { font-size: 11px; font-weight: 700; white-space: nowrap; } .themePrev-prestaBody { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .themePrev-prestaBodyTitle { font-size: 13px; font-weight: 800; color: var(--palette-text); } .themePrev-field { display: flex; flex-direction: column; gap: 4px; } .themePrev-fieldLabel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--palette-muted); } .themePrev-fieldBox { font-size: 13px; color: var(--palette-text); background: var(--palette-elevated); border: 1px solid var(--palette-border); border-radius: 10px; padding: 8px 11px; } /* Adhérents */ .themePrev-adhList { display: flex; flex-direction: column; gap: 8px; } .themePrev-adhItem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; background: var(--palette-surface); border: 1px solid var(--palette-border); transition: border-color .15s, box-shadow .15s; } .themePrev-adhItem.is-active { border-color: var(--palette-primary); box-shadow: 0 0 0 1px var(--palette-primary); } .themePrev-adhAvatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; } .themePrev-adhBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .themePrev-adhName { font-size: 14px; font-weight: 700; color: var(--palette-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themePrev-adhMeta { font-size: 12px; color: var(--palette-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themePrev-adhRoles { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; } .themePrev-roleBadge { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 3px 9px; } .themePrev-roleBadge--top { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #5b3a00; } .themePrev-roleBadge--primary { background: color-mix(in srgb, var(--palette-primary) 14%, transparent); color: var(--palette-primary); } .themePrev-roleBadge--neutral { background: var(--palette-elevated); color: var(--palette-muted); } .themePrev-adhChevron { color: var(--palette-primary); font-size: 20px; line-height: 1; flex: 0 0 auto; } /* Mes consommations */ .themePrev-consoList { display: flex; flex-direction: column; gap: 10px; } .themePrev-consoCard { border: 1px solid var(--palette-border); border-radius: 16px; overflow: hidden; background: var(--palette-surface); } .themePrev-consoSummary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; } .themePrev-consoLeft { display: flex; align-items: center; gap: 10px; min-width: 0; } .themePrev-consoChevron { color: var(--palette-muted); display: inline-flex; flex: 0 0 auto; } .themePrev-consoTexts { display: flex; flex-direction: column; min-width: 0; } .themePrev-consoTitle { font-size: 14px; font-weight: 700; color: var(--palette-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .themePrev-consoMeta { font-size: 12px; color: var(--palette-muted); } .themePrev-consoRight { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .themePrev-consoStatus { font-size: 12px; font-weight: 800; } .themePrev-consoStatus--done { color: #16a34a; } .themePrev-consoStatus--wait { color: #d97706; } .themePrev-consoStatus--soon { color: var(--palette-primary); } .themePrev-consoAmount { font-size: 14px; font-weight: 800; color: var(--palette-text); } .themePrev-consoPay { margin: 0 14px 12px; } .themePrev-consoPayBtn { width: 100%; border: none; border-radius: 12px; padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--palette-primary); color: var(--palette-on-primary); }