/* Nonagone — feuille de style unique, portée depuis les tokens visuels de la maquette Design Canvas (Nonagone.dc.html). Toutes les couleurs/espacements passent par les variables ci-dessous : ne pas coder de valeur en dur ailleurs. */ /* Thème clair : c'est le thème par défaut de tout le site (sans attribut sur ). Le thème sombre est l'exception, activée en posant [data-theme="dark"] sur — soit via le bouton de la page d'accueil publique, soit via celui du menu une fois connecté (voir includes/header.php et le script inline dans son , plus la bascule dans assets/js/app.js). */ :root { --bg: #f3efe9; --panel: #ffffff; --panel-alt: #f5f1ec; --surface: #eae4dc; --surface-alt: #ece6de; --text: #333333; --text-dim: rgba(51, 51, 51, .6); --text-dimmer: rgba(51, 51, 51, .48); --text-faint: rgba(51, 51, 51, .38); --border: rgba(38, 38, 38, .12); --border-soft: rgba(38, 38, 38, .09); --border-hair: rgba(38, 38, 38, .07); --accent: #d97757; --accent-hover: #c2643f; --accent-soft: rgba(217, 119, 87, .1); --accent-line: rgba(217, 119, 87, .35); --grid-line: rgba(38, 38, 38, .06); --ink-rgb: 51, 51, 51; --danger-text: #b23b3b; --font-head: Archivo, system-ui, sans-serif; --font-body: Manrope, system-ui, sans-serif; --radius: 2px; } :root[data-theme="dark"] { --bg: #262626; --panel: #333333; --panel-alt: #2b2b2b; --surface: #3d3d3d; --surface-alt: #3a3a3a; --text: #dddddd; --text-dim: rgba(221, 221, 221, .55); --text-dimmer: rgba(221, 221, 221, .42); --text-faint: rgba(221, 221, 221, .32); --border: rgba(221, 221, 221, .1); --border-soft: rgba(221, 221, 221, .08); --border-hair: rgba(221, 221, 221, .06); --accent-hover: #e28a6c; --grid-line: rgba(221, 221, 221, .045); --ink-rgb: 221, 221, 221; --danger-text: #f0a3a3; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4a4a4a; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: #2b2b2b; } :root[data-theme="dark"] .shell { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } ::selection { background: rgba(217, 119, 87, .35); } button { font-family: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #d8d2c8; } ::-webkit-scrollbar-track { background: #f5f1ec; } .page { min-height: 100vh; background: var(--bg); padding: 0 0 60px; } .shell-wrap { padding: 26px 18px 0; display: flex; justify-content: center; } .shell { width: 100%; max-width: 1360px; border: 1px solid var(--border-soft); overflow: hidden; background: var(--panel); box-shadow: 0 30px 80px rgba(38, 38, 38, .12); } @media (min-width: 900px) { .shell-wide { max-width: 1640px; } } @media (max-width: 640px) { .shell-wrap { padding: 0; } .shell { border-left: 0; border-right: 0; } } /* Header ------------------------------------------------------------- */ .app-header { position: relative; z-index: 20; background: var(--panel-alt); border-bottom: 1px solid var(--border); } .app-header-row { display: flex; align-items: center; gap: 18px; padding: 14px 20px; } .brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; } .brand-label { font: 700 17px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .main-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; } .nav-item { display: flex; align-items: center; gap: 7px; flex: none; padding: 9px 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: rgba(var(--ink-rgb), .7); font: 600 12px var(--font-head); letter-spacing: .06em; cursor: pointer; white-space: nowrap; text-decoration: none; } .nav-item:hover { color: var(--accent); } .nav-item.active { background: var(--accent-soft); border-bottom-color: var(--accent); color: var(--accent); } .nav-item .icon { position: relative; } /* Messagerie/Profil/Thème : icône seule sur la nav desktop (le tiroir mobile garde le libellé, voir includes/header.php). */ .main-nav .nav-item-compact .nav-label { display: none; } .main-nav .nav-item-compact { padding: 9px; } .nav-badge { position: absolute; top: -7px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--panel-alt); font: 700 9px var(--font-body); line-height: 15px; text-align: center; } .drawer-toggle { margin-left: auto; display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font: 700 11px var(--font-head); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: var(--radius); } .drawer-nav { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .drawer-nav[hidden] { display: none; } .drawer-nav .nav-item { justify-content: flex-start; padding: 15px 20px; border-left: 3px solid transparent; border-bottom: 1px solid var(--border-hair); text-align: left; } .drawer-nav .nav-item.active { border-left-color: var(--accent); } @media (min-width: 1100px) { .drawer-toggle, .drawer-nav { display: none; } } @media (max-width: 1099.98px) { .main-nav { display: none; } } /* Bottom tab bar (mobile) -------------------------------------------- */ .tab-bar { position: sticky; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel-alt); border-top: 1px solid rgba(var(--ink-rgb), .12); padding-bottom: 6px; } .tab-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px 9px; background: none; border: 0; border-top: 2px solid transparent; color: rgba(var(--ink-rgb), .55); font: 600 9px var(--font-head); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; } .tab-item.active { border-top-color: var(--accent); color: var(--accent); } @media (min-width: 1100px) { .tab-bar { display: none; } } /* Boutons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border: 0; font: 700 13px var(--font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: var(--radius); background: transparent; color: var(--text); } .btn-sm { padding: 11px 16px; font-size: 11px; gap: 8px; } .btn-primary { background: var(--accent); color: #2b2b2b; } .btn-primary:hover { background: var(--accent-hover); } .btn-outline { background: transparent; border: 1px solid rgba(var(--ink-rgb), .3); color: var(--text); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: none; border: 0; color: rgba(var(--ink-rgb), .5); padding: 0; font-size: 11px; } .photo-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .photo-file-name { font: 500 12px var(--font-body); color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; } .media-item { position: relative; aspect-ratio: 1; background: var(--surface); overflow: hidden; display: block; width: 100%; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; } .media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; display: block; } .media-open { cursor: pointer; } .media-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .media-delete-form { position: absolute; top: 6px; right: 6px; margin: 0; } .media-delete-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; } .media-delete-btn:hover { background: rgba(0, 0, 0, .75); } .media-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 8px; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); font: 500 12px var(--font-body); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .modal.modal-media { width: auto; max-width: min(920px, 92vw); max-height: 92vh; } .modal-media-body { display: flex; align-items: center; justify-content: center; background: #000; max-height: calc(92vh - 60px); } .modal-media-body img, .modal-media-body video { display: block; max-width: 100%; max-height: calc(92vh - 60px); width: auto; height: auto; } @media (max-width: 560px) { .modal.modal-media { max-width: 100vw; max-height: 100vh; } .modal-media-body, .modal-media-body img, .modal-media-body video { max-height: calc(100vh - 60px); } } .btn-ghost:hover { color: var(--accent); } .btn-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--surface-alt); border: 1px solid var(--border); color: rgba(var(--ink-rgb), .6); cursor: pointer; } .btn-icon:hover { border-color: var(--accent); color: var(--accent); } .btn[disabled] { opacity: .5; cursor: default; } .theme-toggle { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .theme-icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: flex; } .theme-toggle-fab { position: fixed; top: 22px; right: 22px; z-index: 30; width: 40px; height: 40px; border-radius: 50%; } .theme-toggle.nav-item { border: 0; background: transparent; } /* Grilles à séparateurs 1px ------------------------------------------- */ .divider-grid { display: grid; gap: 1px; background: var(--border); } .divider-grid > * { background: var(--panel-alt); } .cols-auto-fit-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .cols-auto-fit-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .cols-auto-fit-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .cols-auto-fit-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .cols-auto-fill-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .cols-auto-fill-210 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .cols-auto-fill-92 { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } /* Landing -------------------------------------------------------------- */ .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); min-height: 560px; } .hero-copy { padding: 64px 44px 24px; display: flex; flex-direction: column; justify-content: center; gap: 28px; } .hero-title { margin: 0; font: 600 clamp(38px, 5.4vw, 68px)/1.02 var(--font-head); letter-spacing: -.02em; color: var(--text); } .hero-lede { margin: 0; font: 400 16px/1.65 var(--font-body); color: var(--text-dim); } .hero-brand { display: flex; align-items: center; gap: 16px; } @media (max-width: 640px) { .hero-brand { flex-direction: column; align-items: center; text-align: center; } } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .connexion-mobile-btn { display: none; } @media (max-width: 640px) { .connexion-mobile-btn { display: flex; } .connexion-desktop-btn { display: none; } } .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 6px; } .hero-stat { background: var(--panel); padding: 18px 16px; } .hero-stat-value { font: 700 26px var(--font-head); color: var(--accent); } .hero-stat-label { margin-top: 4px; font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .hero-stat-progress { margin-top: 10px; height: 4px; background: var(--border); border-radius: 3px; overflow: hidden; } .hero-stat-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; } .hero-stat-note { margin-top: 6px; font: 400 10px var(--font-body); color: var(--text-faint); } .hero-visual { position: relative; background: var(--panel-alt); border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; overflow: hidden; min-height: 360px; padding: 32px 24px 15px; } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; } .hero-visual-top { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; } .hero-photos { position: relative; display: flex; gap: 10px; width: 100%; } .hero-photo { flex: 1; min-width: 0; aspect-ratio: 4/3; background: var(--surface); display: flex; align-items: center; justify-content: center; color: rgba(var(--ink-rgb), .32); overflow: hidden; } .hero-caption { position: relative; font: 500 11px/1.6 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); text-align: center; } .feature-grid { border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .feature { padding: 34px 30px; border-right: 1px solid var(--border); } .feature h3 { margin: 14px 0 8px; font: 600 16px var(--font-head); color: var(--text); } .feature p { margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--text-dim); } .landing-footer { padding: 22px 30px; border-top: 1px solid var(--border); background: var(--panel-alt); font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } /* Formulaires ----------------------------------------------------------- */ .field { display: block; background: var(--panel-alt); padding: 16px 18px; } .field-label { display: block; font: 600 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dimmer); } .field input, .field select, .field textarea { margin-top: 9px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .16); padding: 6px 0; color: var(--text); font: 400 15px var(--font-body); outline: none; } .field textarea { font-family: var(--font-body); resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent); } .form-note { font: 400 12px var(--font-body); color: rgba(var(--ink-rgb), .4); } .field-row-flex { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 480px; } .field-row-flex[hidden] { display: none; } .badge-premium { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font: 700 10px var(--font-head); letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius); vertical-align: middle; } /* Animation "arêtes intérieures" du logo (popup café d'evenements.php, gros logo de la page d'accueil) : les diagonales intérieures sont des individuelles (voir logoInnerEdgesSvg() dans includes/functions.php) avec un animation-delay décalé en inline, pour un retracé "les unes après les autres" plutôt que toutes en même temps. Le contour extérieur (polygon) et les points (circle) ne sont pas concernés, ils restent fixes. */ @keyframes logo-anim-inner-kf { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 100; } } .logo-anim-inner line { stroke-dasharray: 100; animation: logo-anim-inner-kf 4.5s ease-in-out infinite; } .form-error { padding: 14px 18px; background: rgba(217, 90, 90, .12); border: 1px solid rgba(217, 90, 90, .4); color: var(--danger-text); font: 500 13px var(--font-body); border-radius: var(--radius); margin-bottom: 18px; } .form-success { padding: 14px 18px; background: rgba(217, 119, 87, .12); border: 1px solid var(--accent-line); color: var(--accent); font: 500 13px var(--font-body); border-radius: var(--radius); margin-bottom: 18px; } /* Cartes / listes --------------------------------------------------- */ .panel { background: var(--panel); padding: 26px 24px; } .panel-alt { background: var(--panel-alt); padding: 26px 24px; } .section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; } .section-title h3 { margin: 0; font: 600 13px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .avatar { display: flex; align-items: center; justify-content: center; background: var(--surface); color: rgba(var(--ink-rgb), .4); font: 600 14px var(--font-head); flex: none; overflow: hidden; } .avatar-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .member-card { display: block; text-align: left; background: var(--panel-alt); border: 1px solid var(--border); padding: 0; cursor: pointer; text-decoration: none; color: inherit; } .member-card:hover { border-color: var(--accent); } .member-card .avatar { width: 100%; aspect-ratio: 1; font-size: 34px; } .member-card-body { display: block; padding: 14px 15px 16px; } .member-card-name { display: block; font: 600 15px/1.25 var(--font-head); color: var(--text); } .member-card-sector { display: block; margin-top: 7px; font: 500 10px var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } .member-card-city { display: flex; align-items: center; gap: 5px; margin-top: 8px; font: 400 12px var(--font-body); color: rgba(var(--ink-rgb), .45); } .mini-avatar-grid { display: block; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; color: inherit; text-decoration: none; } .mini-avatar-grid .avatar { aspect-ratio: 1; width: 100%; font-size: 20px; } .mini-avatar-grid:hover .avatar { background: var(--accent-soft); color: var(--accent); } .mini-avatar-name { margin-top: 8px; font: 600 11px/1.3 var(--font-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-row { display: flex; align-items: center; gap: 12px; background: var(--panel-alt); border: 0; padding: 12px 14px; cursor: pointer; text-align: left; width: 100%; text-decoration: none; color: inherit; } .rank-row:hover { background: var(--surface-alt); } .rank-num { flex: none; width: 22px; font: 700 13px var(--font-head); color: var(--accent); } .rank-row .avatar { width: 38px; height: 38px; font-size: 13px; } /* Filtres annuaire ---------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .filter-item { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; background: var(--panel-alt); padding: 14px 16px; } .filter-item input, .filter-item select { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 400 14px var(--font-body); outline: none; } .filter-item select { cursor: pointer; } /* Tableaux (admin) ------------------------------------------------------ */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); } table.data-table { width: 100%; border-collapse: collapse; min-width: 560px; } table.data-table thead tr { background: var(--surface-alt); } table.data-table th { text-align: left; padding: 13px 16px; font: 600 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .55); white-space: nowrap; } table.data-table td { padding: 13px 16px; font: 400 13px var(--font-body); color: var(--text); white-space: nowrap; } table.data-table tbody tr { background: var(--panel-alt); border-top: 1px solid var(--border-soft); } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } /* Documents (admin) ----------------------------------------------------- */ .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .folder-card { position: relative; background: var(--panel-alt); border: 1px solid var(--border); } .folder-card-link { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 18px; text-decoration: none; color: inherit; } .folder-icon { display: flex; color: #D97757; } .folder-name { font: 600 14px var(--font-head); color: var(--text); word-break: break-word; } .folder-count { font: 500 11px var(--font-body); color: rgba(var(--ink-rgb), .45); } .folder-delete-form { position: absolute; top: 10px; right: 10px; margin: 0; } .doc-rename-form { display: flex; align-items: center; gap: 8px; margin: 0; } .doc-rename-input { flex: 1; min-width: 140px; background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--text); font: 400 13px var(--font-body); padding: 4px 0; outline: none; } .doc-rename-input:focus { border-bottom-color: var(--accent); } /* À faire (admin) -------------------------------------------------------- */ .todo-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); } .todo-row:last-child { border-bottom: 0; } .todo-row form { display: flex; margin: 0; } .todo-check { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid rgba(var(--ink-rgb), .35); background: transparent; color: #2b2b2b; cursor: pointer; padding: 0; } .todo-check:hover { border-color: var(--accent); } .todo-check.is-done { background: var(--accent); border-color: var(--accent); } .todo-title { flex: 1; min-width: 0; font: 500 14px var(--font-body); color: var(--text); } .todo-row.is-done .todo-title { color: rgba(var(--ink-rgb), .4); text-decoration: line-through; } .todo-meta { flex: none; font: 400 11px var(--font-body); color: rgba(var(--ink-rgb), .35); white-space: nowrap; } @media (max-width: 640px) { .todo-meta { display: none; } } /* Modales -------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 20, .72); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-backdrop[hidden] { display: none; } .modal { width: 100%; max-width: 420px; max-height: 70vh; overflow: auto; background: var(--panel-alt); border: 1px solid rgba(var(--ink-rgb), .14); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .modal-head h4 { margin: 0; font: 600 14px var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .modal-close { background: none; border: 0; color: rgba(var(--ink-rgb), .5); cursor: pointer; padding: 0; } .modal-close:hover { color: var(--accent); } .modal-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-hair); } /* Messagerie ------------------------------------------------------------ */ .messenger { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border); min-height: 560px; } .thread-list { background: var(--panel-alt); max-width: 340px; } .thread-item { display: flex; gap: 12px; width: 100%; text-align: left; padding: 14px 18px; background: var(--panel-alt); border: 0; border-left: 2px solid transparent; border-bottom: 1px solid var(--border-hair); cursor: pointer; text-decoration: none; color: inherit; } .thread-item.active { background: var(--surface-alt); border-left-color: var(--accent); } .thread-name-row { display: flex; justify-content: space-between; gap: 8px; } .thread-name { font: 600 13px var(--font-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-time { flex: none; font: 400 10px var(--font-body); color: rgba(var(--ink-rgb), .35); } .thread-last { display: block; margin-top: 4px; font: 400 12px var(--font-body); color: rgba(var(--ink-rgb), .45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-pane { background: var(--panel); display: flex; flex-direction: column; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .chat-body { flex: 1; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 56vh; } .chat-row { display: flex; } .chat-row.me { justify-content: flex-end; } .chat-bubble { max-width: 76%; padding: 12px 15px; font: 400 14px/1.5 var(--font-body); background: var(--panel-alt); color: var(--text); } .chat-row.me .chat-bubble { background: var(--accent); color: #2b2b2b; } .chat-meta { display: block; margin-top: 6px; font: 500 10px var(--font-body); color: rgba(var(--ink-rgb), .35); } .chat-row.me .chat-meta { color: rgba(43, 43, 43, .6); } .chat-input-row { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); } .chat-input-row input { flex: 1; min-width: 0; background: var(--panel-alt); border: 1px solid rgba(var(--ink-rgb), .12); padding: 13px 14px; color: var(--text); font: 400 14px var(--font-body); outline: none; } .chat-input-row input:focus { border-color: var(--accent); } .chat-input-row button { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; background: var(--accent); border: 0; color: #2b2b2b; font: 700 11px var(--font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .chat-input-row button:hover { background: var(--accent-hover); } /* Admin ------------------------------------------------------------------ */ .admin-tabs { display: flex; gap: 2px; padding: 0 24px; background: var(--panel-alt); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .admin-tab { flex: none; padding: 14px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: rgba(var(--ink-rgb), .55); font: 600 11px var(--font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; text-decoration: none; } .admin-tab.active { border-bottom-color: var(--accent); color: var(--accent); } .admin-tab:hover { color: var(--accent); } .admin-shell { display: flex; flex-direction: column; } .admin-sidebar { display: none; } .admin-main { flex: 1; min-width: 0; } @media (min-width: 900px) { .admin-shell { flex-direction: row; } .admin-tabs { display: none; } .admin-sidebar { display: flex; flex-direction: column; flex: none; width: 220px; padding: 16px 0; background: var(--panel-alt); border-right: 1px solid var(--border); } .admin-sidebar-link { padding: 11px 22px; border-left: 3px solid transparent; color: rgba(var(--ink-rgb), .6); font: 600 11px var(--font-head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .admin-sidebar-link.active { border-left-color: var(--accent); color: var(--accent); background: rgba(217, 119, 87, .08); } .admin-sidebar-link:hover { color: var(--accent); } } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .kpi-card { background: var(--panel-alt); padding: 20px 22px; } .kpi-label { font: 500 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dimmer); } .kpi-value { margin-top: 9px; font: 700 28px var(--font-head); color: var(--text); } .kpi-delta { margin-top: 5px; font: 600 11px var(--font-body); color: var(--accent); } .bar-row { padding: 10px 0; } .bar-row-head { display: flex; justify-content: space-between; font: 500 12px var(--font-body); color: rgba(var(--ink-rgb), .65); } .bar-track { margin-top: 7px; height: 6px; background: var(--surface); } .bar-fill { height: 6px; background: var(--accent); } .legend-row { display: flex; align-items: center; gap: 10px; font: 400 12px var(--font-body); color: rgba(var(--ink-rgb), .6); } .legend-dot { flex: none; width: 10px; height: 10px; } /* Événements ---------------------------------------------------------- */ .event-card { background: var(--panel-alt); border: 1px solid var(--border); display: flex; flex-direction: column; } .event-photo { aspect-ratio: 16/9; background: var(--surface); display: flex; align-items: center; justify-content: center; font: 600 10px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .32); overflow: hidden; } .news-photo { background: var(--surface); display: flex; align-items: center; justify-content: center; font: 600 9px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink-rgb), .35); overflow: hidden; } .event-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .event-body h3 { margin: 0; font: 600 18px/1.2 var(--font-head); color: var(--text); } .event-body p { margin: 0; font: 400 13px/1.6 var(--font-body); color: rgba(var(--ink-rgb), .55); } .event-meta { display: flex; flex-direction: column; gap: 7px; font: 400 12px var(--font-body); color: rgba(var(--ink-rgb), .5); } .cafe-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 640px) { .cafe-events-grid { grid-template-columns: 1fr; } } .event-meta span { display: flex; align-items: center; gap: 7px; } .event-capacity-bar { height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), .08); overflow: hidden; } .event-capacity-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; } .event-capacity-fill.is-full { background: rgba(217, 90, 90, 1); } .event-footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border-soft); } .event-feed-photo { flex: none; width: 112px; height: 84px; align-self: center; background: var(--surface); display: flex; align-items: center; justify-content: center; text-align: center; font: 600 9px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink-rgb), .32); overflow: hidden; } .event-date-tile { flex: none; width: 52px; padding: 8px 0; background: var(--surface); text-align: center; } .event-date-day { font: 700 19px var(--font-head); color: var(--accent); } .event-date-mon { font: 600 9px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .45); } .event-date-year { margin-top: 2px; font: 500 9px var(--font-body); color: rgba(var(--ink-rgb), .32); } /* Icônes svg inline ------------------------------------------------------ */ .icon { display: flex; } .icon svg { display: block; } /* Générique --------------------------------------------------------------- */ .text-dim { color: var(--text-dim); } .mt-0 { margin-top: 0; } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }