/* =========================================================================== EXKAVE — MON ESPACE / LE LOUNGE Salon d'écoute, pas tableau de bord. La différence tient en une phrase : l'admin est un outil de gestion, le Lounge est un endroit où l'on revient. Donc peu de blocs, beaucoup d'air, une seule chose importante par zone, et la couleur vient des pochettes — pas de l'interface. Rien n'est réinventé ici : la palette, les matières et la typographie viennent de exkave-ui-global.css et exkave-typography.css. Ce fichier n'ajoute qu'une grille, un shell et une famille de cartes. Il n'existe qu'UNE carte : si une section a besoin d'être « plus jolie », c'est la carte qu'on corrige, pas une variante locale qu'on invente. Deux graisses, 400 et 600. Aucune autre. =========================================================================== */ :root { /* --- grille : les seules largeurs de rupture du cockpit ---------------- */ --sp-marge-xl: 64px; /* ≥1440 */ --sp-marge-l: 48px; /* ≥1024 */ --sp-marge-m: 32px; /* ≥872 */ --sp-marge-s: 16px; /* mobile */ --sp-marge: var(--sp-marge-s); --sp-gap-cartes: 16px; /* devient 24 au-dessus de 872 */ --sp-gap-sections: 40px; /* devient 48 au-dessus de 1024 */ --sp-pad-carte: 18px; /* devient 24 au-dessus de 872 */ --sp-r-carte: 16px; --sp-r-bouton: 12px; --sp-r-capsule: 999px; --sp-tap: 48px; /* hauteur minimale d'une cible tactile */ --sp-sidebar: 248px; --sp-contenu-max: 1120px; /* --- matières : le salon ---------------------------------------------- Anthracite CHAUD, pas bleu. Les surfaces montent d'un cran vers le noyer à mesure qu'elles s'approchent de la lecture. */ --sp-fond: var(--ex-page, #0a0908); --sp-surface: var(--ex-carton, #14110d); --sp-surface-2: var(--ex-carton-2, #1e1912); --sp-noyer: #2a2119; --sp-encre: var(--ex-encre, #fffdf7); --sp-encre-douce: var(--ex-encre-douce, rgba(255, 253, 247, .70)); --sp-cendre: var(--ex-cendre, #8b8478); --sp-trait: var(--ex-trait, rgba(255, 253, 247, .13)); --sp-laiton: var(--ex-laiton, #d8b765); --sp-laiton-doux: rgba(216, 183, 101, .16); --sp-filet: rgba(216, 183, 101, .26); /* Lumière chaude : une seule, très basse, jamais un néon. */ --sp-lueur: radial-gradient(120% 90% at 12% -10%, rgba(216, 183, 101, .10) 0%, rgba(216, 183, 101, 0) 58%); --sp-ombre: 0 18px 40px -26px rgba(0, 0, 0, .78); --sp-ombre-relief: 0 26px 60px -30px rgba(0, 0, 0, .85); --sp-duree: .22s; --sp-courbe: cubic-bezier(.2, .7, .2, 1); } html[data-exkave-theme="light"] { --sp-fond: var(--ex-page, #f3eee1); --sp-surface: #fbf7ec; --sp-surface-2: #f1e9d8; --sp-noyer: #e2d6bd; --sp-encre: var(--ex-encre, #131210); --sp-encre-douce: rgba(19, 18, 16, .74); --sp-cendre: #6b6355; --sp-trait: rgba(19, 18, 16, .14); --sp-laiton: #8a6620; --sp-laiton-doux: rgba(138, 102, 32, .12); --sp-filet: rgba(138, 102, 32, .26); --sp-lueur: radial-gradient(120% 90% at 12% -10%, rgba(138, 102, 32, .07) 0%, rgba(138, 102, 32, 0) 58%); --sp-ombre: 0 16px 34px -26px rgba(60, 45, 20, .34); --sp-ombre-relief: 0 24px 50px -30px rgba(60, 45, 20, .40); } @media (min-width: 872px) { :root { --sp-marge: var(--sp-marge-m); --sp-gap-cartes: 24px; --sp-pad-carte: 24px; } } @media (min-width: 1024px) { :root { --sp-marge: var(--sp-marge-l); --sp-gap-sections: 48px; } } @media (min-width: 1440px) { :root { --sp-marge: var(--sp-marge-xl); } } /* =========================================================================== SHELL =========================================================================== */ /* Le fond de page appartient au système de thème du site, qui n'active à ce jour que le thème sombre : `exkave-theme.css` peint `html` et `body` depuis `--bg`. Mon espace, lui, sait s'afficher en clair. On reprend donc le fond pour NOS pages seulement — d'où la classe posée sur — sans rien changer aux vingt autres routes. */ /* Un ATTRIBUT, pas une classe : la coquille partagée réaffecte `document.documentElement.className` au chargement et emportait la classe avec elle. L'attribut, lui, survit. */ html[data-space], html[data-space] body.space-page { /* Longhands, pas le raccourci : `background: var(--x) !important` mélangé à un `background-image` dans le même bloc laissait des longhands vides, et la peau mobile — qui impose `background: none #050505 !important` sur `body` — reprenait la main. */ background-color: var(--sp-fond) !important; background-image: none !important; background-attachment: initial !important; } body.space-page { margin: 0; background: var(--sp-fond); color: var(--sp-encre); font-family: var(--font-body); font-weight: var(--font-weight-regular, 400); -webkit-font-smoothing: antialiased; } .space-shell { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 var(--sp-marge) calc(var(--sp-tap) + 40px); max-width: calc(var(--sp-sidebar) + var(--sp-contenu-max) + var(--sp-gap-sections) + 2 * var(--sp-marge-xl)); margin-inline: auto; } .space-shell::before { content: ""; position: fixed; inset: 0; background: var(--sp-lueur); pointer-events: none; z-index: 0; } .space-main { position: relative; z-index: 1; min-width: 0; } /* --- barre latérale : desktop seulement ---------------------------------- */ .space-sidebar { display: none; } @media (min-width: 1024px) { .space-shell { grid-template-columns: var(--sp-sidebar) minmax(0, 1fr); gap: var(--sp-gap-sections); padding-bottom: 96px; } .space-sidebar { display: block; position: sticky; top: 96px; align-self: start; z-index: 1; padding-top: 8px; } } .space-sidebar-profil { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--sp-trait); border-radius: var(--sp-r-carte); background: var(--sp-surface); } .space-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--sp-r-capsule); object-fit: cover; background: var(--sp-surface-2); border: 1px solid var(--sp-filet); } .space-avatar-vide { display: grid; place-items: center; font-weight: var(--font-weight-emphasis, 600); color: var(--sp-laiton); font-size: .95rem; } .space-sidebar-identite { min-width: 0; display: grid; gap: 3px; } .space-sidebar-nom { font-weight: var(--font-weight-emphasis, 600); font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .space-nav { margin-top: 20px; display: grid; gap: 2px; } .space-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--sp-r-bouton); color: var(--sp-encre-douce); text-decoration: none; font-size: .95rem; transition: background var(--sp-duree) var(--sp-courbe), color var(--sp-duree) var(--sp-courbe); } .space-nav a:hover { background: var(--sp-surface); color: var(--sp-encre); } .space-nav a[aria-current="page"] { background: var(--sp-surface); color: var(--sp-encre); font-weight: var(--font-weight-emphasis, 600); box-shadow: inset 2px 0 0 var(--sp-laiton); } .space-nav-icone { width: 18px; text-align: center; color: var(--sp-laiton); font-size: .9rem; } .space-sidebar-pied { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sp-trait); display: grid; gap: 8px; } /* --- navigation basse : mobile seulement --------------------------------- */ .space-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--sp-surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--sp-trait); padding-bottom: env(safe-area-inset-bottom, 0); } .space-mobile-nav a, .space-page .space-mobile-nav button { appearance: none; border: 0; background: none; display: grid; place-items: center; gap: 3px; min-height: var(--sp-tap); padding: 8px 4px; color: var(--sp-encre-douce); font: inherit; font-size: .68rem; text-decoration: none; cursor: pointer; } .space-mobile-nav [aria-current="page"] { color: var(--sp-laiton); font-weight: var(--font-weight-emphasis, 600); } .space-mobile-nav-icone { font-size: 1.05rem; line-height: 1; } @media (min-width: 1024px) { .space-mobile-nav { display: none; } } /* Lounge only: keep the shared scroll threshold and accessible label. */ .space-page:has(.space-shell-dashboard) .exkave-back-top { left: auto !important; right: 16px !important; bottom: 16px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; gap: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important; } .space-page:has(.space-shell-dashboard) .exkave-back-top b { display: none !important; } .space-page:has(.space-shell-dashboard) .exkave-back-top span { background: none !important; } @media (max-width: 1023px) { body.space-page:has(.space-shell-dashboard) { padding-bottom: calc(var(--mobile-nav-height, 129px) + env(safe-area-inset-bottom, 0px) + 16px); } html:has(.space-shell-dashboard) { scroll-padding-bottom: calc(var(--mobile-nav-height, 129px) + env(safe-area-inset-bottom, 0px) + 16px); } .space-page:has(.space-shell-dashboard) .exkave-back-top { /* The shared mobile shell pins this control with !important. */ bottom: calc(var(--mobile-nav-height, 129px) + env(safe-area-inset-bottom, 0px) + 16px) !important; } } /* --- feuille « Plus » ---------------------------------------------------- */ .space-plus:not([open]) { display: none; } .space-plus[open] { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; background: rgba(0, 0, 0, .58); border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; } .space-plus::backdrop { background: rgba(0, 0, 0, .58); } .space-plus-panneau { background: var(--sp-surface); border-top: 1px solid var(--sp-filet); border-radius: var(--sp-r-carte) var(--sp-r-carte) 0 0; padding: 20px var(--sp-marge) calc(20px + env(safe-area-inset-bottom, 0)); display: grid; gap: 4px; } .space-plus-panneau a, .space-plus-panneau button { appearance: none; border: 0; background: none; text-align: left; min-height: var(--sp-tap); padding: 0 12px; border-radius: var(--sp-r-bouton); color: var(--sp-encre); font: inherit; font-size: 1rem; text-decoration: none; display: flex; align-items: center; cursor: pointer; } .space-plus-panneau a:hover, .space-plus-panneau button:hover { background: var(--sp-surface-2); } /* =========================================================================== TYPOGRAPHIE DE SECTION =========================================================================== */ .space-section { margin-top: var(--sp-gap-sections); } .space-section-tete { display: flex; align-items: baseline; justify-content: space-between; /* Le lien de section peut passer à la ligne. Mesuré sur la production le 2026-08-23 : avec la police réellement servie, « Voir tous tes dépôts » poussait l'en-tête 27 px au-delà du cadre sur toutes les largeurs mobiles. Le serveur de développement, lui, retombait sur une police système plus étroite et ne montrait rien. */ flex-wrap: wrap; gap: 4px 16px; margin-bottom: 14px; min-width: 0; } .space-section-tete > div { min-width: 0; } .space-section-tete h2 { --font-size-h2: 1.0625rem; --letter-spacing-h2: -.005em; --line-height-heading: 1.3; margin: 0; font-size: 1.0625rem; font-weight: var(--font-weight-emphasis, 600); letter-spacing: -.005em; } .space-section-tete p { margin: 4px 0 0; color: var(--sp-cendre); font-size: .875rem; } .space-lien { color: var(--sp-laiton); text-decoration: none; font-size: .875rem; border-radius: var(--sp-r-bouton); max-width: 100%; overflow-wrap: anywhere; } @media (min-width: 872px) { .space-lien { white-space: nowrap; } } .space-lien:hover { text-decoration: underline; } /* =========================================================================== HERO =========================================================================== */ .space-hero { position: relative; z-index: 1; padding: clamp(28px, 5vw, 52px) 0 0; } .space-hero-visuel { position: relative; min-height: clamp(270px, 31vw, 410px); overflow: hidden; border: 1px solid var(--sp-trait); border-radius: var(--sp-r-carte); background: #090909; isolation: isolate; } .space-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.04); } .space-hero-visuel::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .08) 72%), linear-gradient(0deg, rgba(0, 0, 0, .48), transparent 48%); pointer-events: none; } .space-hero-titre { position: absolute; z-index: 2; left: clamp(22px, 4vw, 52px); bottom: clamp(24px, 4vw, 48px); max-width: min(570px, 72%); } .space-hero-kicker { margin: 0 0 9px; color: var(--sp-laiton); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; } .space-hero-bonjour { margin: 10px 0 0; color: rgba(255, 255, 255, .78); font-size: clamp(1rem, 1.5vw, 1.2rem); } .space-hero-panneau { padding-top: 22px; } .space-hero-cockpit .space-hero-salut { --font-size-h1: clamp(3rem, 7vw, 6rem); color: #fff; font-size: clamp(3rem, 7vw, 6rem); line-height: .92; letter-spacing: -.055em; } .space-hero-salut { --font-size-h1: clamp(1.75rem, 3.6vw, 2.6rem); --letter-spacing-h1: -.02em; --line-height-heading: 1.1; margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: var(--font-weight-emphasis, 600); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; } .space-hero-sous { margin: 6px 0 0; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--sp-encre-douce); } .space-hero-lead { margin: 14px 0 0; max-width: 54ch; color: var(--sp-cendre); font-size: .95rem; line-height: 1.55; } .space-hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; } .space-hero-etiquettes { margin-top: 16px; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 8px; } .space-identite { display: flex; align-items: center; gap: 16px; } .space-identite .space-avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.25rem; } .space-identite .space-hero-sous { margin-top: 3px; } .space-identite .space-hero-etiquettes { margin-top: 8px; } @media (max-width: 640px) { .space-hero-visuel { min-height: 245px; border-radius: 14px; } .space-hero-photo { object-position: 61% center; } .space-hero-visuel::after { background: linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .18)), linear-gradient(0deg, rgba(0, 0, 0, .58), transparent 55%); } .space-hero-titre { left: 20px; bottom: 22px; max-width: 82%; } .space-hero-cockpit .space-hero-salut { font-size: clamp(2.8rem, 15vw, 4.2rem); } .space-hero-panneau { padding-top: 18px; } } .space-stats { margin-top: 18px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .space-stats::-webkit-scrollbar { display: none; } .space-stats > span { flex: 0 0 auto; display: grid; gap: 1px; min-width: 96px; padding: 10px 13px; border: 1px solid var(--sp-trait); border-radius: var(--sp-r-bouton); background: color-mix(in srgb, var(--sp-surface) 74%, transparent); } .space-stats strong { font-size: 1.15rem; } .space-stats small { color: var(--sp-cendre); font-size: .72rem; } .space-cockpit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .space-cockpit-colonne { min-width: 0; } @media (min-width: 1180px) { .space-cockpit-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 28px; } } .space-compteurs .space-carte { padding: 15px; } .space-depots-finalises { margin-top: var(--sp-gap-cartes); } .space-carte-compacte { padding: 15px; } /* Une annonce ne doit jamais élargir la colonne du Lounge sur téléphone. */ [data-space-section="market"], [data-space-section="market"] .space-grille, [data-space-section="market"] .space-carte-compacte { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } [data-space-section="market"] .space-carte-meta { min-width: 0; overflow-wrap: anywhere; } .space-conversations { display: grid; border: 1px solid var(--sp-trait); border-radius: var(--sp-r-carte); background: var(--sp-surface); overflow: hidden; } .space-conversation { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 72px; padding: 11px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--sp-trait); } .space-conversation:last-child { border-bottom: 0; } .space-conversation:hover { background: var(--sp-surface-2); } .space-conversation-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sp-noyer); color: var(--sp-laiton); font-weight: var(--font-weight-emphasis, 600); } .space-conversation-corps { display: grid; min-width: 0; } .space-conversation-corps strong, .space-conversation-corps span, .space-conversation-corps small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .space-conversation-corps strong { font-size: .88rem; } .space-conversation-corps span { color: var(--sp-encre-douce); font-size: .78rem; } .space-conversation-corps small { color: var(--sp-cendre); font-size: .72rem; } .space-badge-non-lu { display: grid; place-items: center; min-width: 23px; height: 23px; padding-inline: 6px; border-radius: 999px; background: var(--sp-laiton); color: #131210; font-size: .7rem; font-weight: var(--font-weight-emphasis, 600); } /* =========================================================================== BOUTONS — deux niveaux, pas davantage Une feuille partagée dore TOUT