/* ============================================================================================ Insteddy : feuille de style — direction « Ethereal Glass » Noir OLED, lueur de fond fixe aux couleurs de chacun, panneaux à double bordure (coque + cœur), boutons en pilule, mouvements à ressort (cubic-bezier(.32, .72, 0, 1)). 1. Design system 2. Base et composants 3. Structure 4. Menus et fenêtres 5. Fonctionnalités 6. Adaptations (tablette, téléphone, tactile, mouvement réduit) ============================================================================================ */ /* Geist (licence OFL, voir fonts/Geist-LICENSE.txt) : police variable ; latin d'abord, le reste seulement si besoin */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------ 1. design system */ :root { color-scheme: dark; /* fond et surfaces */ --bg: #050505; /* noir OLED */ --bg-subtle: rgba(10, 10, 12, .86); /* cœur des grands panneaux (laisse deviner la lueur du fond) */ --surface-1: #0c0c0e; /* cœur des fenêtres, cartes */ --surface-2: #131316; /* menus, survol */ --surface-3: #1b1b1f; /* appuyé */ --fill: rgba(255, 255, 255, .04); --fill-strong: rgba(255, 255, 255, .08); --border: rgba(255, 255, 255, .07); /* filets : blanc translucide, jamais gris plein */ --border-strong: rgba(255, 255, 255, .11); --shell: rgba(255, 255, 255, .035); /* coque extérieure du « double-bezel » */ --highlight: inset 0 1px 1px rgba(255, 255, 255, .06); /* reflet en haut du cœur */ /* texte (AA sur noir) */ --text: #f4f4f5; --text-muted: #a1a1aa; --text-faint: #82828c; /* palette personnelle (« Mon profil et couleurs », posée par app.js) : bulles envoyées, pastilles, focus */ --c1: #8b5cf6; --c2: #6366f1; --c3: #22d3ee; --on-accent: #fff; --accent: var(--c1); --accent-hover: color-mix(in srgb, var(--c1) 86%, #fff); --accent-text: color-mix(in srgb, var(--c1) 55%, #fff); --accent-soft: color-mix(in srgb, var(--c1) 14%, transparent); --accent-border: color-mix(in srgb, var(--c1) 40%, transparent); --ring: color-mix(in srgb, var(--c1) 60%, #fff); --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%); /* bouton principal : pilule blanche, texte noir */ --cta: #f4f4f5; --cta-hover: #ffffff; --on-cta: #09090b; /* états */ --danger: #f43f5e; --danger-text: #fb7185; --ok: #34d399; --warn: #fbbf24; --live: #ff2d55; /* typographie */ --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 21px; --text-2xl: 28px; --text-3xl: 40px; /* rayons : courbes concentriques (cœur = coque − épaisseur de la coque) */ --radius-xs: 8px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 28px; --radius-full: 999px; /* ombres : très diffuses, jamais dures */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, .7); --shadow-lg: 0 40px 100px -30px rgba(0, 0, 0, .85), 0 0 0 1px var(--border); /* mouvements : ressort, jamais linéaire */ --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.32, .72, 0, 1); --ease-in: cubic-bezier(.4, 0, .8, .2); --dur-fast: .2s; --dur: .35s; --dur-slow: .6s; /* gabarits */ --gap: 14px; --topbar-h: 58px; --sidebar-w: 372px; --panel-w: 380px; --shell-max: 1720px; --lane: 780px; /* anciens noms */ --glass-2: var(--fill); --glass-3: var(--fill-strong); --line: var(--border); --line-2: var(--border-strong); --muted: var(--text-muted); --faint: var(--text-faint); --bubble-in: #141417; --violet: var(--c1); --indigo: var(--c2); --cyan: var(--c3); --pink: #f472b6; --grad-soft: var(--accent-soft); --glow: none; --radius: var(--radius-2xl); } /* ------------------------------------------------ 2. base */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; overscroll-behavior: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } input, textarea, button { -webkit-appearance: none; appearance: none; margin: 0; } input[type="checkbox"], input[type="color"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .conv-list, .messages, .panel-body, .modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--text-base); line-height: 1.5; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } /* lueur de fond : deux halos très doux aux couleurs de la palette, fixes (rien ne bouge) */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42vmax 42vmax at 6% -12%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%), radial-gradient(38vmax 38vmax at 104% 108%, color-mix(in srgb, var(--c3) 11%, transparent), transparent 70%), radial-gradient(30vmax 30vmax at 62% 38%, color-mix(in srgb, var(--c2) 5%, transparent), transparent 70%); } [hidden] { display: none !important; } button { font: inherit; color: inherit; } h1, h2, h3 { letter-spacing: -.025em; } svg { fill: currentColor; } /* icônes Lucide en trait fin et précis */ svg.lc { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } ::selection { background: color-mix(in srgb, var(--c1) 40%, transparent); } * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .12) padding-box; } ::-webkit-scrollbar-track { background: transparent; } .muted { color: var(--text-muted); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* étiquette « sourcil » au-dessus d'un grand titre */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--fill); color: var(--text-muted); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ------------------------------------------------ boutons : pilules */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); cursor: pointer; background: rgba(255, 255, 255, .055); color: var(--text); font-size: var(--text-base); font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: var(--highlight); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn svg { width: 16px; height: 16px; } .btn:active:not(:disabled) { transform: scale(.98); } .btn:disabled { opacity: .45; cursor: default; } .btn.primary { border-color: transparent; background: var(--cta); color: var(--on-cta); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); } .btn.danger { color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); } .btn.ghost { background: transparent; box-shadow: none; } .btn.small { min-height: 34px; padding: 6px 14px; font-size: var(--text-sm); } .btn.small svg { width: 15px; height: 15px; } /* icône « bouton dans le bouton » : petite pastille ronde collée au bord droit */ .btn-orb { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -3px -12px -3px 4px; border-radius: 50%; background: rgba(0, 0, 0, .08); transition: transform var(--dur) var(--ease); } .btn:not(.primary) .btn-orb { background: rgba(255, 255, 255, .1); } .btn-orb svg { width: 15px; height: 15px; } @media (hover: hover) { .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); } .btn.primary:hover:not(:disabled) { background: var(--cta-hover); border-color: transparent; } .btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .btn.ghost:hover:not(:disabled) { background: var(--fill); } .btn:hover .btn-orb, .icon-btn.accent:hover .btn-orb, .bento-card:hover .btn-orb { transform: translate(2px, -1px) scale(1.06); } .icon-btn:hover { background: var(--fill-strong); color: var(--text); } .icon-btn.accent:hover { background: var(--cta-hover); color: var(--on-cta); } } .icon-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 19px; height: 19px; } .icon-btn.small { width: 30px; height: 30px; } .icon-btn.small svg { width: 15px; height: 15px; } /* « Nouvelle discussion » : pilule blanche, texte + pastille d'icône (le texte n'apparaît que sur grand écran) */ .icon-btn.accent { width: auto; min-width: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; border-radius: var(--radius-full); background: var(--cta); color: var(--on-cta); } .icon-btn.accent .btn-orb { margin: 0; width: 30px; height: 30px; } .icon-btn.accent svg { width: 16px; height: 16px; } .btn-label { display: none; padding-left: 12px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; } .icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--bg); } /* ------------------------------------------------ champs : filet fin + anneau de coque */ input, textarea { font: inherit; color: var(--text); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--radius-md); box-shadow: 0 0 0 4px rgba(255, 255, 255, .02), var(--highlight); outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } input:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: rgba(255, 255, 255, .15); } input:focus, textarea:focus { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 18%, transparent); } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:disabled, textarea:disabled { opacity: .55; } input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); box-shadow: none; } select { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 46px; padding: 0 40px 0 16px; font: inherit; font-size: var(--text-md); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--radius-md); outline: none; cursor: pointer; box-shadow: 0 0 0 4px rgba(255, 255, 255, .02), var(--highlight); background: rgba(255, 255, 255, .035) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } select:hover { border-color: rgba(255, 255, 255, .15); } select:focus { border-color: rgba(255, 255, 255, .22); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 18%, transparent); } select option { background: var(--surface-2); color: var(--text); } .link-btn { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 4px; cursor: pointer; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } .link-btn:hover { color: var(--text); text-decoration-color: currentColor; } /* ------------------------------------------------ onglets segmentés : pilules, l'onglet ouvert en blanc */ .tabs, .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .035); border: 1px solid var(--border); box-shadow: var(--highlight); } .tabs button, .seg button { height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } @media (hover: hover) { .tabs button:hover, .seg button:hover { color: var(--text); } } .tabs button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--cta); color: var(--on-cta); } .tabs { margin: 0 0 24px; } .seg-note { margin: 10px 0 0; font-size: var(--text-sm); } /* ------------------------------------------------ étiquettes, pastilles */ .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-full); background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-text); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .tag.warn { background: rgba(244, 114, 182, .1); border-color: rgba(244, 114, 182, .32); color: #f9a8d4; } .tag.grey { background: var(--fill); border-color: var(--border); color: var(--text-muted); } .badge { flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .count-pill { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-full); background: var(--pink); color: #fff; font-size: 11px; font-weight: 600; } /* ------------------------------------------------ logo, marque */ .logo { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--grad); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .08); } .logo svg { width: 100%; height: 100%; } .logo path { fill: #fff; } .logo circle { fill: var(--c2); } .logo.big { width: 52px; height: 52px; border-radius: 16px; } .logo.huge { width: 64px; height: 64px; border-radius: 20px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-text { font-size: var(--text-md); font-weight: 600; letter-spacing: -.02em; color: var(--text); } /* ------------------------------------------------ chargement */ .loader { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 24px; background: var(--bg); transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow); } .loader.done { opacity: 0; visibility: hidden; pointer-events: none; } .loader > * { transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .loader.done > * { filter: blur(8px); transform: scale(1.4); } /* (le logo passe devant l'écran pendant que l'interface arrive : hideLoader) */ .loader-bar { position: relative; width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--fill-strong); } .loader-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: var(--text); animation: loader-slide 1.2s var(--ease) infinite; } @keyframes loader-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------------------------ connexion : grand titre à gauche, formulaire à droite */ .auth { position: fixed; inset: 0; z-index: 1; overflow-y: auto; } .auth-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 56px; width: min(1240px, 100%); min-height: 100%; margin: 0 auto; padding: 40px 16px; } .auth-aside { display: none; } /* carte à double bordure : coque translucide + cœur */ .auth-card { justify-self: center; width: 100%; max-width: 440px; padding: 34px 30px 26px; text-align: center; border: 8px solid var(--shell); border-radius: 36px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight), var(--shadow-lg); transition: max-width var(--dur-slow) var(--ease); } .auth-card.wide { max-width: 600px; } .auth-card > .logo.big { margin-bottom: 6px; } .auth h1 { margin: 16px 0 4px; font-size: var(--text-2xl); font-weight: 600; } .auth-sub { margin: 0 0 22px; color: var(--text-muted); } .auth-sub:empty { display: none; } .auth-form { display: grid; gap: 16px; text-align: left; } .auth-form label, .school-row label, .suggest-form label { display: grid; gap: 8px; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); } .auth-form input { height: 46px; padding: 0 16px; font-size: var(--text-md); } .auth-form .btn { min-height: 50px; margin-top: 8px; font-size: var(--text-md); } .auth-form .btn.primary { justify-content: space-between; padding-left: 24px; padding-right: 22px; } .auth-hint { margin: 0; color: var(--text-faint); font-size: var(--text-sm); text-align: center; } .auth-error { min-height: 20px; margin: 14px 0 0; color: var(--danger-text); font-size: var(--text-sm); } .auth-error:empty { margin-top: 6px; } .auth-install { display: flex; margin: 10px auto 0; } .auth-aside .auth-title { margin: 28px 0 22px; font-size: clamp(52px, 6.2vw, 92px); line-height: .94; font-weight: 600; letter-spacing: -.05em; text-wrap: balance; } .auth-aside .auth-title em { font-style: normal; color: var(--text-faint); } .auth-aside > p { max-width: 460px; margin: 0; color: var(--text-muted); font-size: var(--text-lg); line-height: 1.6; } /* points forts : petite grille de cartes à double bordure */ .auth-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin: 48px 0 0; padding: 0; list-style: none; } .auth-points li { display: grid; gap: 12px; padding: 18px; border: 5px solid var(--shell); border-radius: 26px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight); } .auth-points li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fill-strong); color: var(--text); box-shadow: var(--highlight); } .auth-points svg { width: 18px; height: 18px; } .auth-points b { display: block; font-weight: 600; letter-spacing: -.01em; } .auth-points small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.45; } @media (min-width: 1000px) { .auth-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); padding: 96px 56px; } .auth-aside { display: block; } .auth-card { justify-self: end; } .auth-card > .logo, .auth-card > h1 { display: none; } /* (la présentation à gauche porte déjà la marque) */ .auth-wrap:has(.auth-card.wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); } } .school-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .school-row > label { min-width: 0; } .suggest-form .school-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .school-row + .link-btn { margin-top: 8px; } .signup-suggested { margin: 0; color: var(--ok); font-size: var(--text-sm); font-weight: 500; } .suggest-form { display: grid; gap: 12px; margin-bottom: 8px; } .suggest-form input { height: 46px; padding: 0 16px; } .suggest-ico { font-size: 22px; } .hero-school { margin-top: 2px !important; color: var(--text-muted); font-size: var(--text-sm); } .class-chip, .lvl, .cls-letter { font-weight: 700; } .lvl-6 { color: #4ade80; } .lvl-5 { color: #38bdf8; } .lvl-4 { color: #fbbf24; } .lvl-3 { color: #f472b6; } .lvl-2 { color: #22d3ee; } .lvl-1 { color: #e879f9; } .lvl-t { color: #fde047; } .pin-ico { flex: none; margin-left: 4px; font-size: 11px; opacity: .7; } .panel-tools { display: grid; gap: 8px; } .channel-card { display: grid; gap: 8px; min-width: 220px; max-width: 300px; } .channel-card.gone { color: var(--text-muted); font-style: italic; } .channel-card-head { display: flex; align-items: center; gap: 10px; } .channel-card-head b { display: block; } .channel-card-head small { color: inherit; opacity: .75; font-size: var(--text-xs); } .channel-card p { margin: 0; font-size: var(--text-sm); opacity: .85; } .channel-card .btn { justify-self: start; } .pf-school { display: block; margin: 2px 0 6px; color: var(--text-muted); font-size: var(--text-sm); } .pending { display: grid; gap: 8px; justify-items: center; } .pending p { margin: 0; } .pending .btn { margin-top: 14px; } .hourglass { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 50%; background: var(--fill-strong); color: var(--text); box-shadow: 0 0 0 6px var(--shell), var(--highlight); } .hourglass svg { width: 24px; height: 24px; } /* icônes Lucide (ISC) dessinées par la feuille de style : onglets de navigation */ :root { --i-mine: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%2F%3E%3C%2Fsvg%3E"); --i-channels: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E"); --i-reels: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12.296%203.464%203.02%203.956%22%2F%3E%3Cpath%20d%3D%22M20.2%206%203%2011l-.9-2.4c-.3-1.1.3-2.2%201.3-2.5l13.5-4c1.1-.3%202.2.3%202.5%201.3z%22%2F%3E%3Cpath%20d%3D%22M3%2011h18v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22m6.18%205.276%203.1%203.899%22%2F%3E%3C%2Fsvg%3E"); --i-lives: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.247%207.761a6%206%200%200%201%200%208.478%22%2F%3E%3Cpath%20d%3D%22M19.075%204.933a10%2010%200%200%201%200%2014.134%22%2F%3E%3Cpath%20d%3D%22M4.925%2019.067a10%2010%200%200%201%200-14.134%22%2F%3E%3Cpath%20d%3D%22M7.753%2016.239a6%206%200%200%201%200-8.478%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); --i-games: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%226%22%20x2%3D%2210%22%20y1%3D%2211%22%20y2%3D%2211%22%2F%3E%3Cline%20x1%3D%228%22%20x2%3D%228%22%20y1%3D%229%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2215%22%20x2%3D%2215.01%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2218%22%20x2%3D%2218.01%22%20y1%3D%2210%22%20y2%3D%2210%22%2F%3E%3Cpath%20d%3D%22M17.32%205H6.68a4%204%200%200%200-3.978%203.59c-.006.052-.01.101-.017.152C2.604%209.416%202%2014.456%202%2016a3%203%200%200%200%203%203c1%200%201.5-.5%202-1l1.414-1.414A2%202%200%200%201%209.828%2016h4.344a2%202%200%200%201%201.414.586L17%2018c.5.5%201%201%202%201a3%203%200%200%200%203-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4%204%200%200%200%2017.32%205z%22%2F%3E%3C%2Fsvg%3E"); --i-groups: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); --i-dms: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E"); --i-appeals: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2014h2a2%202%200%200%200%200-4h-3c-.6%200-1.1.2-1.4.6L3%2016%22%2F%3E%3Cpath%20d%3D%22m14.45%2013.39%205.05-4.694C20.196%208%2021%206.85%2021%205.75a2.75%202.75%200%200%200-4.797-1.837.276.276%200%200%201-.406%200A2.75%202.75%200%200%200%2011%205.75c0%201.2.802%202.248%201.5%202.946L16%2011.95%22%2F%3E%3Cpath%20d%3D%22m2%2015%206%206%22%2F%3E%3Cpath%20d%3D%22m7%2020%201.6-1.4c.3-.4.8-.6%201.4-.6h4c1.1%200%202.1-.4%202.8-1.2l4.6-4.4a1%201%200%200%200-2.75-2.91%22%2F%3E%3C%2Fsvg%3E"); --i-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); --i-chevdown: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); --i-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22%2F%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E"); } /* ------------------------------------------------ 3. structure : barre flottante, puis panneaux à double bordure */ .layout { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: var(--gap); padding: 14px 16px 16px; } /* barre de navigation : îlot de verre flottant, détaché du haut, centré */ .topbar { grid-row: 1; position: relative; z-index: 6; justify-self: center; width: max-content; max-width: 100%; border-radius: var(--radius-full); } .topbar::before { /* (le flou est sur un calque à part : sur la barre elle-même, il enfermerait le menu plein écran du téléphone) */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: rgba(14, 14, 17, .62); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 0 0 1px var(--border-strong), var(--highlight), 0 24px 60px -24px rgba(0, 0, 0, .8); } .topbar-inner { display: flex; align-items: center; gap: 6px; height: var(--topbar-h); padding: 0 8px 0 14px; } .topbar .brand { flex: none; margin-right: 10px; } .topbar .brand .logo { width: 30px; height: 30px; border-radius: 50%; } .nav-toggle { display: none; } /* navigation principale : pilules ; l'onglet ouvert est éclairé */ .side-tabs { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; } .side-tabs::-webkit-scrollbar { display: none; } .side-tabs button { --icon: var(--i-mine); position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .side-tabs button::before { content: ""; flex: none; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .side-tabs button[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--border), var(--highlight); } .side-tabs [data-tab="channels"] { --icon: var(--i-channels); } .side-tabs [data-tab="reels"] { --icon: var(--i-reels); } .side-tabs [data-tab="lives"] { --icon: var(--i-lives); } .side-tabs [data-tab="games"] { --icon: var(--i-games); } .side-tabs [data-tab="groups"] { --icon: var(--i-groups); margin-left: 8px; } .side-tabs [data-tab="dms"] { --icon: var(--i-dms); } .side-tabs [data-tab="appeals"] { --icon: var(--i-appeals); } .tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .side-actions { flex: none; display: flex; align-items: center; gap: 4px; margin-left: 10px; } .me-bar { flex: none; display: flex; align-items: center; gap: 2px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--border); } .me { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 3px; border-radius: var(--radius-full); cursor: pointer; transition: background-color var(--dur) var(--ease); } .me-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .me-text small { color: var(--text-muted); font-size: var(--text-xs); } .me-name { font-size: var(--text-sm); font-weight: 600; } .topbar .me-text { display: none; max-width: 150px; } .topbar .me-text small, .topbar .me-text .tbadge { display: none; } .topbar .me-text .me-name > .nm { max-width: none; flex-shrink: 1; } .topbar .me .avatar { width: 34px; height: 34px; font-size: 13px; } /* (rangée fixée : quand la barre du haut est masquée, dans une discussion sur téléphone, les panneaux gardent toute la hauteur) */ .shell { grid-row: 2; position: relative; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--gap); width: 100%; max-width: var(--shell-max); min-height: 0; margin: 0 auto; } /* double bordure : coque translucide (bordure) + cœur (fond limité à l'intérieur) ; les arrondis restent concentriques */ .sidebar, .chat, .panel { min-width: 0; min-height: 0; overflow: hidden; border: 6px solid var(--shell); border-radius: 30px; background: var(--bg-subtle) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight); } /* ------------------------------------------------ avatars */ .avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 16px; user-select: none; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .avatar.group { border-radius: 32%; } .avatar.sm { width: 36px; height: 36px; font-size: 14px; } .avatar.xs { width: 30px; height: 30px; font-size: 12px; } .avatar.lg { width: 100px; height: 100px; font-size: 36px; } .avatar.group svg { width: 50%; height: 50%; } .avatar.group svg.lc { stroke: rgba(255, 255, 255, .95); } .avatar.online::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2.5px solid #0b0b0d; } .avatar.sm.online::after, .avatar.xs.online::after { width: 10px; height: 10px; border-width: 2px; } .modal .avatar.online::after { border-color: var(--surface-1); } /* ------------------------------------------------ colonne des discussions */ .sidebar { display: flex; flex-direction: column; } .search { position: relative; padding: 14px 14px 10px; flex: none; } .search svg { position: absolute; left: 30px; top: calc(50% + 2px); width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .search input { width: 100%; height: 42px; padding: 0 16px 0 42px; border-radius: var(--radius-full); font-size: var(--text-base); } .conv-list { flex: 1; margin: 0; padding: 4px 8px 12px; list-style: none; overflow-y: auto; } .conv { position: relative; display: flex; align-items: center; gap: 13px; padding: 10px 12px; margin-bottom: 2px; border-radius: 20px; cursor: pointer; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .conv:active { background: var(--fill); } .conv.active { background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px var(--border), var(--highlight); } .conv:focus-visible { outline-offset: -2px; } .conv-body { flex: 1; min-width: 0; } .conv-line { display: flex; align-items: center; gap: 6px; min-width: 0; } .conv-name { flex: 1; min-width: 0; font-weight: 500; font-size: var(--text-md); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv.unread .conv-name .nm { font-weight: 650; } .conv-time { flex: none; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .conv.unread .conv-time { color: var(--text); } .conv-preview { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text-muted); font-size: var(--text-sm); } .conv.unread .conv-preview { color: var(--text); } .conv-preview .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-preview .typing { color: var(--accent-text); font-style: italic; } .conv-preview .tick { flex: none; } .list-empty { padding: 40px 20px; color: var(--text-muted); text-align: center; font-size: var(--text-base); line-height: 1.6; } .list-label { margin: 18px 12px 8px; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } .conv.channel-new { margin-bottom: 8px; border: 1px dashed var(--border-strong); background: none; } .conv.channel-new .conv-body { display: flex; flex-direction: column; gap: 2px; } .conv.channel-new small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); } .channel-new-ico { background: var(--fill-strong) !important; color: var(--text); font-size: 24px; font-weight: 300; text-shadow: none; } .conv-list .list-empty:not(:first-child) { padding: 18px 20px; } .conv > .btn { flex: none; } /* ------------------------------------------------ discussion */ .chat { position: relative; display: flex; flex-direction: column; } /* aucune discussion ouverte : grand titre + grille de raccourcis asymétrique */ .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 32px; text-align: center; color: var(--text-muted); overflow-y: auto; } .chat-empty h2 { margin: 22px 0 10px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; color: var(--text); } .chat-empty p { max-width: 380px; margin: 0; font-size: var(--text-md); line-height: 1.6; } .empty-bento { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, auto); gap: 12px; width: min(640px, 100%); margin-top: 40px; text-align: left; } .bento-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 0; padding: 18px; color: var(--text); cursor: pointer; border: 5px solid var(--shell); border-radius: 26px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight); font: inherit; text-align: left; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); } .bento-card:active { transform: scale(.98); } .bento-card.big { grid-row: span 3; justify-content: space-between; padding: 24px; } .bento-card .bento-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fill-strong); box-shadow: var(--highlight); } .bento-card .bento-ico svg { width: 19px; height: 19px; } .bento-card b { display: block; font-size: var(--text-md); font-weight: 600; letter-spacing: -.01em; } .bento-card.big b { font-size: var(--text-xl); letter-spacing: -.025em; } .bento-card small { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.45; } .bento-card.small { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 14px; } .bento-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .bento-card .btn-orb { margin: 0; width: 36px; height: 36px; background: var(--cta); color: var(--on-cta); } @media (hover: hover) { .bento-card:hover { background-color: var(--surface-2); } .me:hover { background: var(--fill-strong); } .side-tabs button:hover { color: var(--text); } .conv:hover { background: var(--fill); } .conv.active:hover { background: rgba(255, 255, 255, .065); } .conv.channel-new:hover { border-color: rgba(255, 255, 255, .22); background: var(--fill); } } .chat-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; height: 68px; padding: 0 12px 0 20px; flex: none; border-bottom: 1px solid var(--border); } .chat-head .back { display: none; } .chat-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 10px 0 0; border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; text-align: left; } .chat-title .avatar { width: 40px; height: 40px; font-size: 15px; } .chat-title-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .chat-title-text strong { min-width: 0; font-weight: 600; font-size: var(--text-md); letter-spacing: -.01em; } .chat-title-text small { color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-title-text small.online { color: var(--ok); } .chat-title-text small.typing { color: var(--accent-text); } #chat-name { display: flex; align-items: center; min-width: 0; } .messages { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 24px max(24px, calc((100% - var(--lane)) / 2)) 14px; overflow-anchor: none; /* la position de lecture est gérée par app.js (sinon le navigateur la décale une 2e fois) */ } .messages > :first-child { margin-top: auto; } .load-more { align-self: center; margin: 4px 0 14px; } .day { align-self: center; margin: 20px 0 12px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--fill); border: 1px solid var(--border); color: var(--text-muted); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .unread-chip { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text); font-size: var(--text-xs); font-weight: 500; } .unread-chip::before, .unread-chip::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-border), transparent); } .sys { align-self: center; max-width: 80%; margin: 8px 0; color: var(--text-faint); font-size: var(--text-sm); text-align: center; } .msg { display: flex; margin-top: 2px; } .msg.first { margin-top: 14px; } .msg.out { justify-content: flex-end; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } .msg.new { animation: rise var(--dur-slow) var(--ease) both; } .bubble { position: relative; max-width: min(72%, 580px); padding: 8px 14px 9px; border-radius: 22px; overflow-wrap: anywhere; } .msg.in .bubble { background: rgba(255, 255, 255, .06); border: 1px solid var(--border); border-bottom-left-radius: 8px; box-shadow: var(--highlight); } .msg.out .bubble { background: var(--grad); color: var(--on-grad, #fff); border-bottom-right-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); } .sender { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; font-size: var(--text-xs); font-weight: 600; } .msg.out .sender { margin-bottom: 6px; } .name-row { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: visible; } .name-row > .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name-row > .nm:not(:last-child) { flex-shrink: 0; max-width: calc(100% - 66px); } .name-row > .tbadge { flex: 0 1 auto; min-width: 56px; } .name-row > .tbadge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .conv-name.name-row { margin-right: 6px; } .person-name .name-row { font-weight: 500; } /* banderoles : pastille sombre + anneau lumineux + halo flou (style « Mode IA »). « rainbow » = Fondateur (multicolore qui tourne) ; les titres offerts ont la couleur --bc et l'animation choisies. */ .tbadge { --bc: #8b5cf6; --bc-light: color-mix(in srgb, var(--bc) 45%, #fff); --ring: var(--bc); position: relative; isolation: isolate; flex: none; display: inline-flex; padding: 1.5px; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 16px; letter-spacing: .02em; white-space: nowrap; } .tbadge::before, .tbadge::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ring); } .tbadge::before { inset: -1px; filter: blur(7px); opacity: .85; } .tbadge > span { display: block; padding: 2px 11px; border-radius: inherit; background: #12111f; font-weight: 700; } .tbadge.lg { padding: 2px; font-size: 13px; line-height: 18px; } .tbadge.lg > span { padding: 4px 16px; } .tbadge.rainbow { --ring: conic-gradient( #4285f4, #9b72f3 6%, #ea4335 12%, #fbbc04 18%, #34a853 24%, rgba(255, 255, 255, .16) 32% 42%, #4285f4 50%, #9b72f3 56%, #ea4335 62%, #fbbc04 68%, #34a853 74%, rgba(255, 255, 255, .16) 82% 92%, #4285f4); } .tbadge.spin { --ring: conic-gradient( var(--bc), var(--bc-light) 12%, var(--bc) 24%, rgba(255, 255, 255, .14) 32% 42%, var(--bc) 50%, var(--bc-light) 62%, var(--bc) 74%, rgba(255, 255, 255, .14) 82% 92%, var(--bc)); } /* rotation (Fondateur, « Rotation ») : un carré en dégradé conique pivote derrière la pastille, découpé en anneau (tb-ring) et en halo aux bords adoucis (tb-glow). Seule une transformation est animée : la carte graphique s'en charge sans redessiner la page (l'ancienne version recalculait le dégradé et le flou à chaque image) */ .tbadge.rainbow::before, .tbadge.rainbow::after, .tbadge.spin::before, .tbadge.spin::after { content: none; } .tb-ring, .tb-glow { position: absolute; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; animation-delay: inherit; } .tb-ring { inset: 0; } .tb-glow { inset: -5px; opacity: .8; -webkit-mask: linear-gradient(90deg, transparent, #000 7px, #000 calc(100% - 7px), transparent), linear-gradient(transparent, #000 5px, #000 calc(100% - 5px), transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 7px, #000 calc(100% - 7px), transparent), linear-gradient(transparent, #000 5px, #000 calc(100% - 5px), transparent); mask-composite: intersect; } .tb-ring::before, .tb-glow::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + 26px); aspect-ratio: 1; background: var(--ring); transform: translate(-50%, -50%); animation: badge-rot 3.2s linear infinite; animation-delay: inherit; will-change: transform; } .tbadge.pulse::before { animation: badge-pulse 3.2s ease-in-out infinite; animation-delay: inherit; } /* reflet : une bande claire qui glisse (transformation, sans redessin) derrière le texte */ .tbadge.shine > span { position: relative; isolation: isolate; overflow: hidden; } .tbadge.shine > span::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--bc) 55%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: badge-shine 3.2s ease-in-out infinite; animation-delay: inherit; } .tbadge.still::before { opacity: .6; } .tbadge > span { color: color-mix(in srgb, var(--bc) 18%, #fff); } .tbadge.rainbow > span { color: #fff; } /* vague : les couleurs glissent le long du titre (un motif deux fois plus large qui se décale, en boucle) */ .tbadge.flow { --ring: linear-gradient(90deg, var(--bc), var(--bc-light), var(--bc), var(--bc-light), var(--bc)); } .tbadge.flow::before, .tbadge.flow::after { content: none; } .tbadge.flow .tb-ring::before, .tbadge.flow .tb-glow::before { left: 0; top: 0; width: 200%; height: 100%; aspect-ratio: auto; transform: none; animation: badge-flow 2.6s linear infinite; animation-delay: inherit; } @keyframes badge-flow { to { transform: translateX(-50%); } } /* texte : couleur choisie, ou dégradé des couleurs du titre */ .tb-text { font-style: normal; } .tbadge.tx-color > span { color: var(--txc); } .tbadge.tx-grad > span > .tb-text { background: var(--tx); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* polices (celles déjà présentes sur l'appareil, sinon la plus proche) */ .tbadge.f-rounded, .badge-font.f-rounded { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif; } .tbadge.f-serif, .badge-font.f-serif { font-family: "Didot", "Playfair Display", Georgia, "Noto Serif", "Times New Roman", serif; } .tbadge.f-serif .tb-text, .badge-font.f-serif { font-style: italic; } .tbadge.f-mono, .badge-font.f-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Droid Sans Mono", monospace; letter-spacing: 0; } .tbadge.f-script, .badge-font.f-script { font-family: "Snell Roundhand", "Segoe Script", "Dancing Script", "Brush Script MT", cursive; letter-spacing: 0; } .tbadge.f-marker, .badge-font.f-marker { font-family: "Marker Felt", "Comic Sans MS", "Chalkboard SE", "Coming Soon", casual, cursive; letter-spacing: 0; } .tbadge.f-impact, .badge-font.f-impact { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Avenir Next Condensed", "Roboto Condensed", sans-serif-condensed, sans-serif; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } .tbadge.f-caps, .badge-font.f-caps { font-variant: small-caps; letter-spacing: .1em; } /* « Minecraft » : Monocraft (licence libre OFL, voir fonts/Monocraft-LICENSE.txt), téléchargée seulement si un titre l'utilise */ @font-face { font-family: "Monocraft"; src: url("/fonts/Monocraft.otf") format("opentype"); font-display: swap; } .tbadge.f-minecraft, .badge-font.f-minecraft { font-family: "Monocraft", ui-monospace, monospace; font-weight: 400; letter-spacing: 0; } .tbadge.f-minecraft > span { text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); } @keyframes badge-rot { to { transform: translate(-50%, -50%) rotate(1turn); } } @keyframes badge-pulse { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes badge-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } .text { white-space: pre-wrap; font-size: var(--text-md); line-height: 21px; } .text::after { content: ""; display: inline-block; width: 44px; } .msg.out .text::after { width: 62px; } .text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .msg.in .text a { color: var(--accent-text); } .text.deleted { opacity: .65; font-style: italic; } .meta { position: absolute; right: 12px; bottom: 5px; display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } .msg.out .meta { color: var(--on-grad-meta, rgba(255, 255, 255, .75)); } .tick { width: 16px; height: 11px; } .tick.read { color: color-mix(in srgb, var(--c3) 45%, #fff); } .tick.pending { width: 12px; height: 12px; } .failed { color: #ffd2da; font-weight: 800; } .msg-menu-btn { position: absolute; top: 50%; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 50%; transform: translateY(-50%); display: grid; place-items: center; cursor: pointer; opacity: 0; background: rgba(20, 20, 23, .9); color: var(--text-muted); box-shadow: var(--highlight); transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .msg.in .msg-menu-btn { right: -38px; } .msg.out .msg-menu-btn { left: -38px; } .msg-menu-btn svg { width: 16px; height: 16px; } .msg:hover .msg-menu-btn, .msg-menu-btn:focus-visible { opacity: 1; } .msg.flash .bubble { animation: flash 1.3s var(--ease); } @keyframes flash { 30% { box-shadow: 0 0 0 2px var(--ring); } } .quote { position: relative; display: block; width: 100%; margin: 2px 0 6px; padding: 7px 12px 8px 14px; border: 0; border-radius: var(--radius-md); cursor: pointer; background: rgba(0, 0, 0, .22); overflow: hidden; font-size: var(--text-sm); line-height: 18px; text-align: left; color: inherit; } .quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--quote-color, var(--accent-text)); } .quote b { display: block; color: var(--quote-color, var(--accent-text)); font-size: var(--text-xs); font-weight: 600; } .msg.out .quote b { color: var(--on-grad, #fff); } .quote span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: .8; white-space: pre-wrap; } .typing-bubble { display: flex; gap: 4px; align-items: center; align-self: flex-start; margin-top: 14px; padding: 12px 15px; border-radius: 22px 22px 22px 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); } .typing-bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: bounce 1.2s infinite var(--ease); } .typing-bubble i:nth-child(2) { animation-delay: .15s; } .typing-bubble i:nth-child(3) { animation-delay: .3s; } .typing-bubble small { margin-left: 6px; color: var(--text-muted); font-size: var(--text-xs); } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } } .to-bottom { position: absolute; right: 24px; bottom: calc(var(--composer-h, 90px) + 14px); z-index: 3; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(20, 20, 23, .92); color: var(--text); box-shadow: var(--highlight), var(--shadow-md); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .to-bottom:active { transform: scale(.94); } .to-bottom svg { width: 20px; height: 20px; } .to-bottom span { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; display: grid; place-items: center; } .to-bottom span:empty { display: none; } /* la zone des messages (et son fond d'écran) descend jusqu'en bas de la discussion : la barre d'écriture flotte par-dessus. --composer-h = hauteur de la barre + sa marge, posée par app.js ; les derniers messages gardent cette place en bas pour rester visibles au-dessus de la barre. (Sans app.js : 0, la barre reste sous les messages.) */ #messages { margin-bottom: calc(-1 * var(--composer-h, 0px)); padding-bottom: calc(var(--composer-h, 0px) + 14px); } /* barre d'écriture : îlot à double bordure, centré sur la largeur de lecture */ .composer-wrap { position: relative; z-index: 2; flex: none; width: min(var(--lane), calc(100% - 48px)); margin: 0 auto 20px; padding: 4px; border: 5px solid var(--shell); border-radius: 30px; background: rgba(16, 16, 19, .94) padding-box; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); /* (son contour translucide : les messages dessous s'y floutent) */ box-shadow: 0 0 0 1px var(--border), var(--highlight), var(--shadow-md); transition: box-shadow var(--dur) var(--ease); } .composer-wrap:focus-within { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), var(--highlight), var(--shadow-md); } .reply-bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 6px 6px; } .reply-bar .quote { margin: 0; cursor: default; } .composer { display: flex; align-items: flex-end; gap: 6px; } .composer textarea { flex: 1; min-height: 40px; max-height: 150px; padding: 9px 6px; resize: none; line-height: 22px; font-size: var(--text-md); background: transparent; border: 0; box-shadow: none; } .composer textarea:focus { box-shadow: none; background: transparent; } .send-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: var(--cta); color: var(--on-cta); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .send-btn:active:not(:disabled) { transform: scale(.92); } .send-btn:disabled { background: var(--fill-strong); color: var(--text-faint); cursor: default; } .send-btn svg { width: 19px; height: 19px; } .attach-btn { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); } .attach-btn svg { width: 21px; height: 21px; transition: transform var(--dur-slow) var(--ease); } @media (hover: hover) { .to-bottom:hover { background: var(--surface-3); } .send-btn:hover:not(:disabled) { background: var(--cta-hover); transform: scale(1.04); } .attach-btn:hover svg { transform: rotate(90deg); } .msg-menu-btn:hover { background: var(--surface-3); color: var(--text); } } /* ------------------------------------------------ panneau d'infos : volet à double bordure (colonne fixe sur grand écran) */ .panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(var(--panel-w), 100%); display: flex; flex-direction: column; background-color: rgba(12, 12, 14, .96); box-shadow: 0 0 0 1px var(--border), var(--highlight), -30px 0 80px -30px rgba(0, 0, 0, .9); animation: slide-in var(--dur-slow) var(--ease); } @keyframes slide-in { from { transform: translateX(28px); opacity: 0; } } .panel-head { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 12px 0 22px; border-bottom: 1px solid var(--border); flex: none; font-size: var(--text-md); font-weight: 600; letter-spacing: -.01em; } .panel-head > span { flex: 1; order: -1; } .panel-body { flex: 1; overflow-y: auto; } .panel-section { padding: 20px 22px; border-bottom: 1px solid var(--border); } .panel-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* (« Quitter le groupe » et « Supprimer la discussion ») */ .panel-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 22px 26px; text-align: center; border-bottom: 1px solid var(--border); } .panel-hero h2 { margin: 10px 0 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; } .panel-hero p { margin: 0; color: var(--text-muted); } .panel-label { margin: 0 0 12px; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } .rename { display: flex; gap: 8px; margin-top: 12px; width: 100%; } .rename input, .rename textarea { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: var(--radius-full); } .rename textarea { height: auto; padding: 9px 14px; border-radius: var(--radius-md); resize: vertical; } .person { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .person-name { flex: 1; min-width: 0; text-align: left; } .person-name div { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person-name small { display: block; color: var(--text-muted); font-size: var(--text-xs); } .person-name small.online { color: var(--ok); } /* ------------------------------------------------ 4. menus : verre dépoli à double bordure */ .menu { position: fixed; z-index: 40; min-width: 230px; max-width: calc(100vw - 16px); padding: 4px; border: 4px solid rgba(255, 255, 255, .045); border-radius: 24px; background: rgba(18, 18, 21, .86) padding-box; -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 0 0 1px var(--border-strong), var(--highlight), 0 30px 70px -20px rgba(0, 0, 0, .85); animation: pop var(--dur) var(--ease); transform-origin: var(--menu-origin, top right); } @keyframes pop { from { transform: scale(.94) translateY(-4px); opacity: 0; } } .menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 7px 12px; border: 0; border-radius: 15px; background: none; color: var(--text); text-align: left; cursor: pointer; font-size: var(--text-base); line-height: 1.35; transition: background-color var(--dur-fast) var(--ease); } .menu button > .menu-label { flex: 1; min-width: 0; } .menu button svg.lc { width: 17px; height: 17px; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .menu button:hover, .menu button:focus-visible { background: rgba(255, 255, 255, .07); outline: none; } .menu button:hover svg.lc { color: var(--text); transform: translateX(1px); } .menu button.danger, .menu button.danger svg.lc { color: var(--danger-text); } .menu button.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .menu-sep { height: 1px; margin: 4px 10px; background: var(--border); } .react-quick { display: flex; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .menu .react-quick button { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; font-size: 21px; line-height: 1; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); } .menu .react-quick button:hover { transform: scale(1.15); } .menu .react-quick button:active { transform: scale(.88); } .menu .react-quick button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); } .menu .react-quick .more { font-size: 18px; color: var(--text-muted); } .emoji-grid { width: min(304px, calc(100vw - 32px)); max-height: min(330px, 52vh); overflow-y: auto; overscroll-behavior: contain; } .emoji-cat { padding: 10px 8px 4px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); } .emoji-row { display: grid; grid-template-columns: repeat(8, 1fr); } .menu .emoji-row button { width: auto; height: 36px; min-height: 0; padding: 0; justify-content: center; border-radius: 12px; font-size: 21px; line-height: 1; } .msg.has-react { flex-wrap: wrap; } .reactions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .msg.out .reactions { justify-content: flex-end; } .react-chip { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; box-shadow: var(--highlight); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .react-chip .re { font-size: 15px; line-height: 1; } .react-chip.mine { background: var(--accent-soft); border-color: var(--accent-border); } .react-chip:active { transform: scale(.9); } .react-chip.add { padding: 0 10px; color: var(--text-muted); font-size: var(--text-base); opacity: .75; } @media (hover: hover) { .react-chip:hover { border-color: rgba(255, 255, 255, .24); } .react-chip.add { opacity: 0; } .msg:hover .react-chip.add, .react-chip.add:focus-visible { opacity: .85; } } .notes-older { margin-top: 16px; } /* fonds d'écran de discussion : couleur ou dégradé + motif ou photo, assombris au choix (--wp-dim) */ .has-wp { background-color: var(--wp-color, #0b0b16); background-image: linear-gradient(rgba(0, 0, 0, var(--wp-dim, 0)), rgba(0, 0, 0, var(--wp-dim, 0))), var(--wp-img, none), var(--wp-pattern, none), var(--wp-grad, none); background-size: auto, cover, var(--wp-pattern-size, auto), cover; background-position: center; background-repeat: no-repeat, no-repeat, repeat, no-repeat; } .wp-aurora { --wp-grad: linear-gradient(160deg, #2a1459, #123f5c 55%, #0b2a3a); } .wp-sunset { --wp-grad: linear-gradient(170deg, #3d1238, #7a2a3a 50%, #b0552e); } .wp-ocean { --wp-grad: linear-gradient(180deg, #06263d, #0b4a63 60%, #0e6b73); } .wp-forest { --wp-grad: linear-gradient(165deg, #0f2a1c, #1c4430 60%, #2c5a33); } .wp-candy { --wp-grad: linear-gradient(150deg, #5a2a6e, #8a3d7a 50%, #3b6fa0); } .wp-night { --wp-color: #070b1a; --wp-grad: radial-gradient(ellipse at 50% 0%, #1b2a55, #070b1a 70%); } .wp-doodle { --wp-color: #111b21; --wp-pattern-size: 170px; --wp-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='white' stroke-opacity='.09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='26' cy='28' r='10'/%3E%3Cpath d='M62 24q10-12 20 0t20 0'/%3E%3Cpath d='M136 16l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3Crect x='18' y='96' width='24' height='17' rx='4'/%3E%3Cpath d='M76 84l13 23H63z'/%3E%3Cpath d='M126 104c4-8 18-8 18 3 0 10-18 18-18 18s-18-8-18-18c0-11 14-11 18-3z'/%3E%3Cpath d='M28 150h26M41 137v26'/%3E%3Ccircle cx='96' cy='150' r='5'/%3E%3Cpath d='M146 140q9 8 0 18'/%3E%3C/svg%3E"); } .wp-hearts { --wp-color: #1c0f1a; --wp-pattern-size: 90px; --wp-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M22 30c-4-8-16-6-16 3 0 8 16 17 16 17s16-9 16-17c0-9-12-11-16-3z' fill='%23ff6fae' fill-opacity='.16'/%3E%3Cpath d='M66 70c-3-6-12-4.5-12 2.3 0 6 12 12.7 12 12.7s12-6.7 12-12.7c0-6.8-9-8.3-12-2.3z' fill='%23ff6fae' fill-opacity='.11'/%3E%3C/svg%3E"); } .wp-grid { --wp-color: #0d1117; --wp-pattern-size: 26px; --wp-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M26 0H0v26' fill='none' stroke='white' stroke-opacity='.07'/%3E%3C/svg%3E"); } .wp-stars { --wp-color: #05060f; --wp-pattern-size: 150px; --wp-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' fill='white'%3E%3Ccircle cx='12' cy='20' r='1.2' fill-opacity='.7'/%3E%3Ccircle cx='70' cy='12' r='.8' fill-opacity='.5'/%3E%3Ccircle cx='120' cy='40' r='1.5' fill-opacity='.8'/%3E%3Ccircle cx='40' cy='70' r='.9' fill-opacity='.45'/%3E%3Ccircle cx='96' cy='88' r='1.1' fill-opacity='.6'/%3E%3Ccircle cx='20' cy='120' r='1.4' fill-opacity='.7'/%3E%3Ccircle cx='132' cy='128' r='.8' fill-opacity='.5'/%3E%3Ccircle cx='75' cy='140' r='1' fill-opacity='.55'/%3E%3C/svg%3E"); } .messages.has-wp .sys, .messages.has-wp .day { background: rgba(8, 8, 18, .72); } .messages.has-wp .sys { width: fit-content; margin-left: auto; margin-right: auto; padding: 3px 12px; border-radius: 10px; } .wp-preview { display: flex; flex-direction: column; gap: 4px; height: 150px; padding: 14px; margin-bottom: 12px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; } .wp-preview:not(.has-wp) { background: rgba(0, 0, 0, .25); } .wp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; margin-bottom: 12px; } .wp-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; } .wp-tile .wp-swatch { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; border: 2px solid var(--line); background-color: rgba(0, 0, 0, .3); font-size: 22px; } .wp-tile[aria-pressed="true"] .wp-swatch { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); } .wp-tile small { font-size: 11px; } .wp-dim { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 600; } .wp-dim input { flex: 1; } .wall-btn { width: 100%; } .wp-tile[aria-pressed="true"] .wp-swatch { border-color: var(--text); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); } .wp-preview { border-radius: 24px; } .wp-tile .wp-swatch { border-radius: 18px; } /* chaînes, confidentialité des stories, import de stickers */ .channel-desc { max-width: 320px; margin: 4px auto 0; color: var(--text-muted); font-size: var(--text-sm); white-space: pre-wrap; } .privacy-opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border-strong); border-radius: 20px; background: rgba(255, 255, 255, .02); cursor: pointer; box-shadow: var(--highlight); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .privacy-opt.on { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); } .privacy-opt input { margin-top: 3px; } .privacy-opt b { display: block; font-weight: 600; } .privacy-opt small { color: var(--text-muted); } .privacy-list { max-height: 36vh; overflow-y: auto; margin-top: 6px; } .se-privacy { margin-left: auto; margin-right: 8px; } .sticker-pack { grid-column: 1 / -1; margin: 10px 2px 2px; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } .import-help p { margin: 0 0 8px; font-size: var(--text-sm); color: var(--text-muted); } .import-help b { color: var(--text); } /* « Pour toi » : carte à double bordure */ .foryou-start { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 12px; padding: 32px 16px; color: var(--text); cursor: pointer; border: 6px solid var(--shell); border-radius: 28px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .foryou-start:active:not(:disabled) { transform: scale(.98); } .foryou-start:disabled { cursor: default; opacity: .8; } .foryou-start .fy-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: var(--cta); color: var(--on-cta); font-size: 22px; } .foryou-start b { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; } .foryou-start small { color: var(--text-muted); text-align: center; } .reel.reel-end { align-items: center; justify-content: center; } .reel-end-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; } .reel-end-box .reel-end-ico { font-size: 44px; } .reel-end-box b { font-size: var(--text-xl); font-weight: 600; } .reel-end-box p { margin: 0 0 8px; color: rgba(255, 255, 255, .7); } .reel-act.invest .ico { color: #facc15; } /* « Installer l'appli » */ .install-bar { display: flex; align-items: center; gap: 10px; margin: 0 14px 10px; padding: 6px 6px 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .04); box-shadow: var(--highlight); font-size: var(--text-sm); font-weight: 500; } .install-bar > svg { width: 18px; height: 18px; color: var(--text); } .install-bar span { flex: 1; min-width: 0; } .install-bar .icon-btn { width: 30px; height: 30px; } .install-bar .icon-btn svg { width: 15px; height: 15px; } .push-row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border-radius: 18px; background: var(--fill); border: 1px solid var(--border); } /* appli installée sur téléphone : bandeaux opaques sous la barre d'état et la barre du bas (sinon iOS y met un flou) */ .edge-top, .edge-bottom { display: none; } @media (display-mode: standalone) and (max-width: 760px) { .edge-top, .edge-bottom { display: block; position: fixed; left: 0; right: 0; z-index: 5; background: var(--bg); pointer-events: none; } .edge-top { top: 0; height: env(safe-area-inset-top); } .edge-bottom { bottom: 0; height: env(safe-area-inset-bottom); } } /* amis */ .friend-row { display: flex; align-items: center; gap: 8px; } .friend-row .pick { flex: 1; min-width: 0; } .friend-row .pick.static { cursor: default; } .friend-row .pick.static:hover { background: none; } .friend-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; } .friends-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fill-strong); font-size: 18px; } .readonly-bar .friend-actions { display: inline-flex; margin-left: 10px; vertical-align: middle; } .pf-contact { display: contents; } .menu .count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--pink); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; } /* fenêtres : verre sombre à double bordure, posé sur un voile flouté */ .modal-back { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 28px; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); animation: fade-in var(--dur) var(--ease); } @keyframes fade-in { from { opacity: 0; } } .modal { width: 100%; max-width: 500px; max-height: min(740px, 100%); display: flex; flex-direction: column; overflow: hidden; border: 8px solid rgba(255, 255, 255, .04); border-radius: 38px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border-strong), var(--highlight), 0 50px 120px -40px rgba(0, 0, 0, .9); animation: modal-in var(--dur-slow) var(--ease); } @keyframes modal-in { from { transform: translateY(24px) scale(.97); opacity: 0; } } .modal.wide { max-width: 660px; } .modal-head { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 14px 14px 8px 26px; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.03em; } .modal-head span { flex: 1; } .modal-head .icon-btn { background: var(--fill); } .modal-body { flex: 1; overflow-y: auto; padding: 6px 26px 26px; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px 26px; border-top: 1px solid var(--border); } .modal input[type="search"], .modal input[type="text"] { width: 100%; height: 44px; padding: 0 16px; margin-bottom: 14px; } .modal input[type="search"] { border-radius: var(--radius-full); } .pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 18px; background: none; text-align: left; cursor: pointer; transition: background-color var(--dur) var(--ease); } .pick:active { background: var(--fill); } .pick input { width: 18px; height: 18px; } .pick.chosen { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--border-strong); } .intro-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .intro-head .panel-label { margin: 0; } .intro-head .link-btn { flex: none; margin: 0; } .intro-pick .person-name { flex: 1; min-width: 0; } .pick-head { flex: 1; min-width: 0; margin: 0; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intro-pick input { flex: none; width: 20px; height: 20px; } .new-group { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 20px; background: rgba(255, 255, 255, .03); cursor: pointer; font-weight: 500; box-shadow: var(--highlight); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .new-group:active { transform: scale(.99); } .admin-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: var(--text-base); } .admin-row > div { flex: 1; min-width: 0; } .admin-row span { font-weight: 500; } .admin-row small { display: block; color: var(--text-muted); font-size: var(--text-xs); } .admin-actions { display: flex; gap: 6px; } .share { display: flex; gap: 8px; margin: 6px 0 2px; } .share input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; font-size: var(--text-sm); border-radius: var(--radius-full); } .section-title { margin: 26px 0 10px; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } .section-title:first-child { margin-top: 4px; } /* notification éphémère : pilule de verre flottante */ .toast { position: fixed; left: 50%; bottom: 30px; z-index: 50; max-width: calc(100% - 32px); padding: 11px 20px; border-radius: var(--radius-full); background: rgba(24, 24, 28, .82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--border-strong); box-shadow: var(--highlight), 0 24px 60px -20px rgba(0, 0, 0, .85); color: var(--text); font-size: var(--text-base); font-weight: 500; transform: translate(-50%, 18px) scale(.97); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease); } .toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); } /* ------------------------------------------------ images, GIF et vidéos dans les discussions */ .media-video { display: block; width: 300px; max-width: 100%; max-height: 380px; border-radius: 18px; background: #000; } .bubble.media.vid .meta { top: 10px; bottom: auto; } .upload-tag { position: absolute; left: 12px; top: 10px; padding: 3px 10px; border-radius: var(--radius-full); background: rgba(0, 0, 0, .65); color: #fff; font-size: var(--text-xs); font-weight: 600; } .bubble.media { padding: 4px; } .bubble.media .text::after { display: none; } .media-img { display: block; width: 260px; max-width: 100%; min-height: 80px; max-height: 340px; object-fit: cover; border-radius: 18px; cursor: zoom-in; background: rgba(0, 0, 0, .25); } .msg.out .bubble.media { border-bottom-right-radius: 22px; } .msg.in .bubble.media { border-bottom-left-radius: 22px; } .bubble.media .meta { right: 12px; bottom: 10px; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(0, 0, 0, .55); color: #fff; } .bubble.media .quote { margin: 2px 2px 6px; width: calc(100% - 4px); } .bubble.media .sender { margin: 2px 8px 4px; } .viewer { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 28px; background: rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: zoom-out; animation: fade-in var(--dur) var(--ease); } .viewer img { max-width: 100%; max-height: 100%; border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); } /* ------------------------------------------------ photo de profil et couleurs */ .avatar.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .avatar.photo { background: var(--surface-2) !important; } .profile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 6px; text-align: center; } .profile h2 { margin: 6px 0 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.035em; } .profile-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 16px; } .swatch { aspect-ratio: 1; border: 2px solid transparent; border-radius: 18px; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1); } .swatch[aria-pressed="true"] { border-color: var(--surface-1); box-shadow: 0 0 0 2px var(--text); } .custom-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .custom-colors input[type="color"] { width: 46px; height: 38px; padding: 3px; border-radius: 12px; cursor: pointer; } .custom-colors .btn { margin-left: auto; } .note { margin: 18px 0 0; color: var(--text-faint); font-size: var(--text-sm); } .steps { margin: 14px 0 4px; padding-left: 22px; display: grid; gap: 10px; line-height: 1.55; } .steps li::marker { color: var(--text); font-weight: 600; } .duo { position: relative; flex: none; width: 46px; height: 46px; } .duo .avatar { position: absolute; } .duo .avatar:first-child { left: 0; top: 0; } .duo .avatar:last-child:not(:first-child) { right: 0; bottom: 0; box-shadow: 0 0 0 2px #0b0b0d; } /* ------------------------------------------------ messages supprimés (vus par l'admin), modifiés, « vu par » */ .bubble.ghost { opacity: .75; border: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent) !important; background: color-mix(in srgb, var(--danger) 7%, transparent) !important; box-shadow: none !important; color: var(--text); } .ghost-tag { margin-bottom: 4px; color: var(--danger-text); font-size: 11.5px; font-weight: 600; } .bubble.media .ghost-tag { margin: 4px 8px; } .meta i { font-style: italic; margin-right: 3px; opacity: .85; } .text.edited::after { width: 94px; } .msg.out .text.edited::after { width: 112px; } .meta.clickable { cursor: pointer; border-radius: 6px; } .meta.clickable:hover { text-decoration: underline; } .quote.editing { --quote-color: var(--text); } .seen-sum { margin: 0 0 10px; font-size: var(--text-sm); } .seen-row small { color: var(--text-muted); } .seen-row.seen small { color: var(--accent-text); } @media (hover: hover) { .privacy-opt:hover { border-color: rgba(255, 255, 255, .2); } .foryou-start:hover:not(:disabled) { background-color: var(--surface-2); } .pick:hover { background: var(--fill); } .pick.chosen:hover { background: rgba(255, 255, 255, .07); } .new-group:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); } .swatch:hover { transform: translateY(-3px) scale(1.02); } .modal-head .icon-btn:hover { background: var(--fill-strong); } } /* ------------------------------------------------ messages vocaux */ .bubble.voice { min-width: 240px; padding-bottom: 20px; } .audio { display: flex; align-items: center; gap: 10px; } .ap-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .16); color: inherit; transition: transform var(--dur-fast) var(--ease); } .ap-btn:active { transform: scale(.92); } .msg.in .ap-btn { background: var(--accent); color: var(--on-accent); } .ap-btn svg { width: 18px; height: 18px; } .ap-btn svg.lc { fill: currentColor; stroke-width: 1.5; } .ap-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); cursor: pointer; } .ap-bar::before { content: ""; position: absolute; inset: -10px 0; } /* zone de clic plus haute que la barre */ .ap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #fff; } .msg.in .ap-fill { background: var(--accent-text); } .ap-time { flex: none; min-width: 34px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: .85; } .mic-btn svg { margin: 0; } .rec-bar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-left: 0; } .rec-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--danger); animation: rec-blink 1s ease-in-out infinite; } .rec-time { font-weight: 600; font-variant-numeric: tabular-nums; } .rec-wave { flex: 1; display: flex; align-items: center; gap: 4px; height: 24px; } .rec-wave i { flex: 1; max-width: 4px; height: 30%; border-radius: 2px; background: var(--accent); animation: rec-wave 1s ease-in-out infinite; } .rec-wave i:nth-child(2n) { animation-delay: -.3s; } .rec-wave i:nth-child(3n) { animation-delay: -.6s; } @keyframes rec-blink { 50% { opacity: .3; } } .rec-dot, .rec-wave i { animation-timing-function: var(--ease); } @keyframes rec-wave { 50% { height: 100%; } } /* ------------------------------------------------ admin : mode historique */ .history-btn { width: 100%; } .history-btn svg { width: 17px; height: 17px; } .history { position: fixed; inset: 24px; z-index: 25; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; border: 8px solid rgba(255, 255, 255, .04); border-radius: 38px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border-strong), var(--highlight), 0 50px 120px -40px rgba(0, 0, 0, .9); overflow: hidden; animation: modal-in var(--dur-slow) var(--ease); } .history-head { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 16px 0 10px; border-bottom: 1px solid var(--border); flex: none; } .history-title { flex: 1; min-width: 0; display: flex; flex-direction: column; } .history-title strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-title small { color: var(--text-muted); font-size: var(--text-xs); } .history-msgs { flex: 1; } .history-bar { flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--border); background: var(--surface-1); } .history-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; } .history-info strong { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-text); } .history-info span { color: var(--text-muted); font-size: var(--text-sm); } .history-controls { display: flex; align-items: center; gap: 6px; } .history-controls input[type="range"] { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-appearance: auto; appearance: auto; } .history .msg.h-focus .bubble, .history .sys.h-focus { box-shadow: 0 0 0 2px var(--ring) !important; } .history .sys.h-focus { padding: 4px 10px; border-radius: var(--radius-md); color: var(--text); } .h-old { margin-bottom: 4px; padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .25); font-size: var(--text-sm); text-decoration: line-through; opacity: .7; white-space: pre-wrap; } /* ------------------------------------------------ titres : sélecteur de couleur et d'animation */ .invite-lead { margin: 0 0 6px; color: var(--text-muted); } .badge-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 16px; padding: 22px 12px; border-radius: var(--radius-xl); background: var(--bg); border: 1px solid var(--border); } .preview-name { font-weight: 650; } .badge-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .badge-colors { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } .badge-color { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; background: var(--bc); color: #fff; font-size: var(--text-xs); font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); } .badge-color[aria-pressed="true"] { border-color: var(--surface-1); box-shadow: 0 0 0 2px var(--text); } .badge-color-row input[type="color"], .badge-texts input[type="color"] { width: 40px; height: 34px; flex: none; padding: 3px; border-radius: var(--radius-md); cursor: pointer; } .badge-mixes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; } .badge-mix { height: 24px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-full); cursor: pointer; } .badge-mix[aria-pressed="true"] { border-color: var(--surface-1); box-shadow: 0 0 0 2px var(--text); } .badge-anims { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 16px; } .badge-anims .btn { white-space: nowrap; } .badge-texts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; } .tx-dot { width: 28px; height: 28px; padding: 0; border: 2px solid rgba(255, 255, 255, .22); border-radius: 50%; background: var(--bc); cursor: pointer; } .tx-dot[aria-pressed="true"] { border-color: var(--surface-1); box-shadow: 0 0 0 2px var(--text); } .tx-grad-btn { background: linear-gradient(90deg, #f97316, #f472b6, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; border-color: var(--border-strong); } .badge-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } .badge-reset { display: flex; margin: -6px auto 14px; } .badge-fonts .btn { font-size: var(--text-base); } .modal input.badge-text { margin-bottom: 14px; } .badge-anims .btn[aria-pressed="true"], .badge-texts .btn[aria-pressed="true"], .badge-fonts .btn[aria-pressed="true"] { border-color: transparent; background: var(--cta); color: var(--on-cta); -webkit-text-fill-color: currentColor; } .admin-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .admin-row > .btn { flex: none; } .check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--danger) 7%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); font-size: var(--text-base); cursor: pointer; } .check-row input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--danger); } /* texte sur le dégradé : sombre ou blanc selon la palette (calculé dans applyTheme) */ .msg.out .tick.read { color: var(--on-grad-tick, #a5f3fc); filter: none; } .msg.out .ap-btn { background: var(--on-grad-faint, rgba(255, 255, 255, .16)); } .msg.out .ap-bar { background: var(--on-grad-faint, rgba(255, 255, 255, .2)); } .msg.out .ap-fill { background: var(--on-grad, #fff); box-shadow: none; } .msg.out .quote { background: var(--on-grad-faint, rgba(0, 0, 0, .22)); } .msg.out .quote::before { background: var(--on-grad, #fff); box-shadow: none; } /* ------------------------------------------------ inscription en 4 étapes */ .signup-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; } .signup-dots span { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: var(--radius-full); background: var(--fill); border: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-xs); font-weight: 600; } .signup-dots i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fill-strong); font-style: normal; font-size: 11px; } .signup-dots .on { color: var(--text); border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .07); } .signup-dots .on i, .signup-dots .done i { background: var(--cta); color: var(--on-cta); } .signup-dots .done { color: var(--text-muted); } .signup-flow { text-align: left; } .step-title { margin: 0 0 8px; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.035em; text-align: center; } .step-sub { margin: 0 0 16px; color: var(--text-muted); font-size: var(--text-sm); text-align: center; } .step-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; } .step-actions .btn.primary { flex: 1; max-width: 260px; margin-left: auto; } .rules-box { max-height: min(46vh, 420px); overflow-y: auto; margin-top: 12px; padding: 4px 18px 14px; border-radius: var(--radius-xl); background: var(--bg); border: 1px solid var(--border); font-size: var(--text-sm); line-height: 1.6; text-align: left; } .rules-box.open { max-height: none; overflow: visible; background: none; border: 0; padding: 0; } .rules-box h3 { margin: 18px 0 6px; font-size: var(--text-base); font-weight: 650; color: var(--text); } .rules-box ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-muted); } .rules-box li::marker { color: var(--accent-text); } .rules-intro { margin: 12px 0 0; color: var(--text); } .rules-outro { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid var(--accent-border); font-weight: 550; } .check-row.accept { background: var(--accent-soft); border-color: var(--accent-border); } .check-row.accept input { accent-color: var(--accent); } .check-row input:disabled + span { opacity: .5; } .rules-hint { margin: 8px 0 0; color: var(--text-faint); font-size: var(--text-xs); text-align: center; } .palette-name { margin: -2px 0 10px; text-align: center; font-weight: 650; } .chat-preview { display: flex; flex-direction: column; padding: 10px 14px 14px; border-radius: var(--radius-xl); background: var(--bg); border: 1px solid var(--border); } .chat-preview .bubble, .skin-demo .bubble { max-width: 80%; } /* ------------------------------------------------ compte supprimé : raison + demande de pardon */ .reason-label { margin-top: 14px; } .reason-input, .appeal-form textarea, .appeal-compose textarea { width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.45; } .appeal-reason { display: grid; gap: 4px; margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); text-align: left; font-size: var(--text-base); overflow-wrap: anywhere; } .appeal-reason b { color: var(--danger-text); font-size: var(--text-xs); } .appeal-thread { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; padding: 2px 10px 10px; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--border); text-align: left; } .appeal-thread .bubble { max-width: 85%; } .appeal-thread .msg.first { margin-top: 8px; } .appeal-thread .text::after { display: none; } .appeal-thread .meta { position: static; display: block; margin-top: 3px; text-align: right; } .appeal-empty { margin: 14px; text-align: center; font-size: var(--text-sm); } .appeal-status { margin: 10px 0; text-align: center; font-weight: 650; color: var(--danger-text); } .appeal-status.ok { color: var(--ok); } .appeal-form { display: grid; gap: 10px; margin-top: 12px; text-align: left; } .appeal-form label { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 550; color: var(--text-muted); } .appeal-form input { height: 40px; padding: 0 12px; } .appeal-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; } .appeal-compose textarea { flex: 1; min-height: 44px; } .appeal-back { display: flex; margin: 14px auto 0; } .pending-chat { width: 100%; margin-top: 12px; } .pending-chat .appeal-thread { max-height: 34vh; } .pending-chat .btn { margin-top: 0; } .pending-chat .appeal-compose { margin-top: 8px; } .pending-chat textarea { resize: none; } .admin-row .chat-btn { position: relative; } .admin-row .chat-btn b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 11px; line-height: 18px; } .admin-row small.chat-last { display: block; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); opacity: .8; } .wide-btn { width: 100%; } /* ------------------------------------------------ bulles illustrées (capybara, shiba…) */ .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .skin-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 10px; border: 2px solid var(--line); border-radius: 16px; background: rgba(0, 0, 0, .25); cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .15s; } .skin-card:hover { transform: translateY(-2px); } .skin-card[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c1) 80%, #fff); box-shadow: 0 0 0 3px var(--accent-soft); } .skin-demo { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 86px; } .skin-demo .msg { justify-content: center; width: 100%; margin: 0; } .skin-demo .msg.first.skinned { margin-top: 0; } .skin-name { font-size: 13px; font-weight: 700; } /* skin-deco = le personnage posé sur la bulle ; skinned = les couleurs de la bulle (dans les groupes, les messages des autres gardent le personnage mais restent en bulle grise neutre) */ .msg .bubble.skinned { background: var(--sk-bg) !important; color: var(--sk-fg) !important; border: 1px solid var(--sk-edge) !important; box-shadow: 0 8px 22px -12px var(--sk-edge) !important; } .bubble.skin-deco { min-width: 104px; } .msg.first.skinned { margin-top: 44px; } .msg.first .bubble.skin-deco::after { content: ""; position: absolute; top: -35px; width: 58px; height: 40px; pointer-events: none; background: var(--sk-deco) center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); } .msg.out.first .bubble.skin-deco::after { right: 14px; } .msg.in.first .bubble.skin-deco::after { left: 14px; } .skin-capy { --sk-bg: linear-gradient(180deg, #e8c898 0%, #dbb581 55%, #d0a771 100%); --sk-fg: #2e1d0e; --sk-edge: #9c7447; } .skin-dog { --sk-bg: linear-gradient(160deg, #fcebc8, #f3d39a); --sk-fg: #3a2410; --sk-edge: #c9a064; --sk-deco: url("/skins/doge-head.svg"); } .skin-sausage { --sk-bg: linear-gradient(160deg, #a8643f, #8a4f2f); --sk-fg: #fff4e6; --sk-edge: #6b3a20; } .skin-cat { --sk-bg: linear-gradient(135deg, #eef0f6, #c3c8d8); --sk-fg: #23273a; --sk-edge: #8e94a8; --sk-deco: url("/skins/cat.svg"); } .skin-frog { --sk-bg: linear-gradient(160deg, #8ddb79, #5cbf62); --sk-fg: #0f2a14; --sk-edge: #2f7a3a; } .skin-panda { --sk-bg: linear-gradient(135deg, #ffffff, #e2e2e7); --sk-fg: #16161a; --sk-edge: #1f1f24; --sk-deco: url("/skins/panda.svg"); } .skin-bunny { --sk-bg: linear-gradient(135deg, #fff2f7, #f8c3d8); --sk-fg: #4a1f33; --sk-edge: #eea3c1; --sk-deco: url("/skins/bunny.svg"); } .bubble.skinned .meta { color: var(--sk-fg) !important; opacity: .62; } .bubble.skinned .sender > span:first-child { color: var(--sk-fg) !important; } .bubble.skinned .text a { color: inherit !important; } .bubble.skinned .quote { background: rgba(0, 0, 0, .08) !important; } .bubble.skinned .quote b { color: var(--sk-fg) !important; } .bubble.skinned .quote::before { background: var(--sk-edge) !important; box-shadow: none !important; } .bubble.skinned .tick.read { color: #1d4ed8 !important; filter: none; } .bubble.skinned .ap-btn { background: rgba(0, 0, 0, .12) !important; color: var(--sk-fg) !important; box-shadow: none !important; } .bubble.skinned .ap-bar { background: rgba(0, 0, 0, .14) !important; } .bubble.skinned .ap-fill { background: var(--sk-fg) !important; box-shadow: none !important; } .bubble.media.skinned .meta { color: #fff !important; opacity: 1; } .bubble.skinned.skin-sausage .tick.read { color: #9bd4ff !important; } /* bulles « corps d'animal » (capybara, doge, teckel, grenouille) : la bulle est le corps de l'animal, tête, oreilles et pattes sont accrochées aux bords, sur chaque bulle */ .bubble.body-skin::before { content: ""; position: absolute; z-index: 1; pointer-events: none; } /* capybara : la bulle est entièrement dessinée (svg .capy-bg généré à sa taille par app.js) */ .msg .bubble.skin-capy { isolation: isolate; padding-left: 50px; min-width: 128px; background: transparent !important; border: 0 !important; box-shadow: none !important; } .capy-bg { position: absolute; left: 0; top: -14px; z-index: -1; overflow: visible; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28)); } .capy-bg { --capy-body: #dcb98a; --capy-line: #9b7246; --capy-leg: #c89e6a; --capy-shade: #a9804f; } .bubble.skin-capy:not(.skinned) .capy-bg { --capy-body: var(--bubble-in); --capy-line: rgba(255, 255, 255, .16); --capy-shade: #000; } .bubble.skin-capy:not(.skinned) .capy-bg .c-dark { fill: #d7d9ec; } .bubble.skin-capy:not(.skinned) .capy-bg .c-mouth { stroke: #d7d9ec; } .capy-bg .c-body { fill: var(--capy-body); stroke: var(--capy-line); stroke-width: 1.6; stroke-linejoin: round; } .capy-bg .c-leg { fill: var(--capy-leg); stroke: var(--capy-line); stroke-width: 1.3; } .capy-bg .c-leg.back { filter: brightness(.9); } .capy-bg .c-ear ellipse { fill: var(--capy-leg); stroke: var(--capy-line); stroke-width: 1.3; } .capy-bg .c-ear .c-ear-in { fill: #d98f86; stroke: none; } .capy-bg .c-shade { fill: var(--capy-shade); opacity: .28; } .capy-bg .c-hi { fill: #fff; opacity: .2; } .capy-bg .c-snout { fill: var(--capy-shade); opacity: .22; } .capy-bg .c-fur, .capy-bg .c-lid { fill: none; stroke: var(--capy-line); stroke-width: 1.1; stroke-linecap: round; opacity: .7; } .capy-bg .c-dark { fill: #34200f; } .capy-bg .c-shine { fill: #fff; } .capy-bg .c-mouth { fill: none; stroke: #34200f; stroke-width: 1.2; stroke-linecap: round; } .capy-bg .c-blush { fill: #f09a9a; opacity: .85; } .capy-bg .c-apple-body { fill: #e5484d; stroke: #b3262b; stroke-width: 1; } .capy-bg .c-apple-hi { fill: #fff; opacity: .55; } .capy-bg .c-apple-stem { fill: none; stroke: #6b4423; stroke-width: 1.3; stroke-linecap: round; } .capy-bg .c-apple-leaf { fill: #5fb54a; stroke: #3f8a33; stroke-width: .7; } .bubble.skin-dog { min-width: 110px; } .bubble.skin-dog::before { inset: -2px -12px; background: url("/skins/doge-thumb.svg") left 0 top 4px / 20px 24px no-repeat, url("/skins/doge-paw.svg") right 0 bottom 6px / 18px 14px no-repeat; } .msg.first .bubble.skin-deco.skin-dog::after { top: -30px; right: 8px; left: auto; width: 40px; height: 36px; } /* teckel tourné vers la gauche : tête à gauche, queue à droite */ .bubble.skin-sausage { padding-left: 26px !important; min-width: 120px; } .bubble.skin-sausage::before { inset: -4px -10px -8px -10px; background: url("/skins/sausage-head.svg") left 0 top 0 / 30px 30px no-repeat, url("/skins/sausage-tail.svg") right 0 top 2px / 14px 16px no-repeat, url("/skins/sausage-legs.svg") left 36px bottom 0 / 24px 10px no-repeat, url("/skins/sausage-legs.svg") right 22px bottom 0 / 24px 10px no-repeat; } .bubble.skin-frog { min-width: 100px; } .bubble.skin-frog::before { top: -16px; left: 0; right: 0; height: 18px; background: url("/skins/frog.svg") left 8px top 0 / 28px 18px no-repeat, url("/skins/frog.svg") right 8px top 0 / 28px 18px no-repeat; } /* place au-dessus / en dessous de chaque bulle pour les oreilles, les yeux et les pattes */ .msg.sk-capy, .msg.first.sk-capy { margin-top: 22px; } .msg.sk-frog, .msg.first.sk-frog { margin-top: 20px; } .msg.sk-sausage, .msg.first.sk-sausage { margin-top: 12px; } .msg.sk-dog { margin-top: 6px; } .msg.first.sk-dog { margin-top: 34px; } .skin-demo .msg { margin-top: 0 !important; } /* messages reçus : l'animal est en miroir (il regarde toujours vers le centre de la discussion) */ .msg.in .bubble.body-skin::before, .msg.in .capy-bg { transform: scaleX(-1); } .msg.in .bubble.skin-capy { padding-left: 12px; padding-right: 50px; } .msg.in .bubble.skin-capy .meta { right: 54px; } .msg.in .bubble.skin-sausage { padding-left: 12px !important; padding-right: 30px !important; } .msg.in .bubble.skin-sausage .meta { right: 32px; } .msg.in.first .bubble.skin-deco.skin-dog::after { left: 8px; right: auto; transform: scaleX(-1); } /* même animal chez plusieurs membres d'un groupe : teinte légèrement différente (--sk-filter posé par app.js) */ .bubble.body-skin::before { filter: var(--sk-filter, none); } .bubble.skin-deco::after { filter: var(--sk-filter, ) drop-shadow(0 3px 4px rgba(0, 0, 0, .35)) !important; } .capy-bg { filter: var(--sk-filter, ) drop-shadow(0 6px 10px rgba(0, 0, 0, .28)); } /* ------------------------------------------------ sondages */ .bubble.poll-bubble { min-width: min(300px, 100%); padding-bottom: 22px; } .poll { display: grid; gap: 6px; } .poll-q { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-md); font-weight: 600; line-height: 1.35; } .poll-ico { flex: none; } .poll-sub { margin-top: -2px; font-size: var(--text-xs); opacity: .72; } .poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 8px 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-full); background: rgba(0, 0, 0, .16); color: inherit; font: inherit; font-size: var(--text-base); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } @media (hover: hover) { .poll-opt:hover:not(:disabled) { border-color: rgba(255, 255, 255, .3); } } .msg.out .poll-opt { border-color: color-mix(in srgb, var(--on-grad, #fff) 30%, transparent); } .poll-opt:disabled { cursor: default; } .poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .12); transition: width var(--dur-slow) var(--ease-out); } .msg.in .poll-fill, .home-poll .poll-fill { background: var(--accent-soft); } .poll-opt.voted { border-color: var(--accent-text); } .msg.out .poll-opt.voted { border-color: var(--on-grad, #fff); } .poll-check { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-weight: 800; opacity: .8; } .poll-opt.voted .poll-check { background: var(--cta); border-color: var(--cta); color: var(--on-cta); opacity: 1; } .msg.out .poll-opt.voted .poll-check { background: var(--on-grad, #fff); border-color: var(--on-grad, #fff); color: var(--c2); } .poll-text { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; } .poll-count { position: relative; flex: none; font-weight: 650; font-variant-numeric: tabular-nums; } .poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--text-xs); opacity: .8; } .poll-close { padding: 3px 9px; border: 1px solid currentColor; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: var(--text-xs); cursor: pointer; } .poll-edit { display: grid; gap: 8px; margin-bottom: 8px; } .poll-edit-row { display: flex; gap: 6px; align-items: center; } .modal .poll-edit-row input { margin: 0; } /* ------------------------------------------------ groupe limité : qui peut écrire */ .readonly-bar { padding: 11px 14px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* ------------------------------------------------ stories */ .stories-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 12px; flex: none; scrollbar-width: none; border-bottom: 1px solid var(--border); } .stories-bar::-webkit-scrollbar { display: none; } .story-bubble { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 60px; } .story-ring { padding: 2px; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: transform var(--dur-fast) var(--ease); } @media (hover: hover) { .story-ring:hover { transform: scale(1.04); } } .story-ring.unseen, .story-ring.mine { background: var(--grad); } /* arrondis emboîtés : l'avatar (rond) est séparé de l'anneau par un liseré de la couleur du fond */ .story-ring .avatar { display: grid; border: 2px solid #0b0b0d; border-radius: 50%; } .story-ring .avatar.photo img { border-radius: 50%; } .story-plus { position: absolute; right: 2px; top: 30px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 2px solid #0b0b0d; border-radius: 50%; background: var(--cta); color: var(--on-cta); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; } .story-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11.5px; } .story-viewer, .story-editor { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; background: #05050b; color: #fff; } .story-area { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 10px; } .story-stage { position: relative; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } /* éditeur : le doigt déplace les textes sans faire bouger la page. Pas ailleurs : dans le fil des reels, ça bloquait le glissement d'une vidéo à l'autre (la vidéo occupe presque tout l'écran) */ .story-editor .story-stage { touch-action: none; } .reel .story-stage, .reel .story-area { touch-action: pan-y; } .story-img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; } .story-item { position: absolute; width: max-content; max-width: 300px; transform-origin: center; } .story-item.editable { cursor: grab; touch-action: none; } .story-item .msg { margin: 0 !important; justify-content: center; } .story-item .bubble { max-width: 280px; } .story-item .text::after { display: none; } .story-text { max-width: 300px; padding: 4px 10px; font-size: 22px; font-weight: 800; line-height: 1.2; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; } .st-white { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .75); } .st-black { color: #111; background: #fff; border-radius: 10px; } .st-glow { color: #fff; text-shadow: 0 0 6px var(--c1), 0 0 16px var(--c2), 0 0 30px var(--c3); } .se-top { display: flex; align-items: center; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) 14px 6px; } .se-round { border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; } .se-aa { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--grad); color: var(--on-grad, #fff); font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: var(--glow); } .se-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px max(14px, env(safe-area-inset-bottom)); } .se-hint { color: rgba(255, 255, 255, .55); font-size: 12.5px; } .se-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 75%; overflow-y: auto; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); background: var(--surface-1); border-top: 1px solid var(--line-2); border-radius: 22px 22px 0 0; color: var(--text); animation: rise .2s ease; } .se-panel textarea { width: 100%; min-height: 60px; padding: 10px 12px; resize: none; } .se-preview { position: relative; display: grid; place-items: center; min-height: 96px; margin-bottom: 10px; padding: 26px 10px 14px; overflow: hidden; border-radius: 14px; background: repeating-conic-gradient(#1b1b2e 0% 25%, #232338 0% 50%) 50% / 20px 20px; } .se-preview .story-item { position: relative; } .se-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .se-styles button { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--glass-2); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; } .se-styles button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: var(--on-grad, #fff); } .se-size { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; color: var(--muted); font-size: 13px; } .se-size input { flex: 1; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--c1); -webkit-appearance: auto; appearance: auto; } .se-actions { display: flex; justify-content: flex-end; gap: 8px; } .sv-bars { display: flex; gap: 4px; padding: max(10px, env(safe-area-inset-top)) 12px 6px; } .sv-bar { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3); } .sv-bar i { display: block; width: 0; height: 100%; background: #fff; } .sv-bar i.done { width: 100%; } .sv-bar i.run { animation: sv-run 6s linear forwards; } @keyframes sv-run { to { width: 100%; } } .sv-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 4px 12px; } .sv-head .who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; } .sv-head small { color: rgba(255, 255, 255, .65); font-weight: 400; } .sv-head .icon-btn { color: #fff; } .sv-btn { flex: none; } .sv-nav { position: absolute; top: 100px; bottom: 30px; z-index: 1; width: 35%; border: 0; background: none; cursor: pointer; } .sv-nav.prev { left: 0; } .sv-nav.next { right: 0; } /* ------------------------------------------------ reels */ .reels-pane { padding: 6px 6px 12px; list-style: none; } .reels-new { width: 100%; margin-bottom: 12px; } .reels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .reel-card { position: relative; aspect-ratio: 9 / 14; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #000; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out); } @media (hover: hover) { .reel-card:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-2px); } } .reel-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .reel-card-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 6px; padding: 20px 8px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; font-size: var(--text-xs); text-align: left; } .reel-card-info b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* fil des reels : la miniature (image) reste dans le cadre, le lecteur vidéo (pris dans une petite réserve) se pose dessus */ .reel .story-stage > video { position: absolute; inset: 0; } .reel-viewer { position: fixed; inset: 0; z-index: 28; background: #000; color: #fff; } .reel-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; } .reel-feed::-webkit-scrollbar { display: none; } .reel { position: relative; display: flex; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; } .reel .story-area { padding: 0; } .reel .story-stage { border-radius: 0; box-shadow: none; } .reel-close { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 3; } .reel-actions { position: absolute; right: 12px; bottom: 90px; z-index: 2; display: flex; flex-direction: column; gap: 16px; } .reel-act { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); } .reel-act .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .35); font-size: 22px; } .reel-act.liked .ico { color: #ff3b5c; background: rgba(255, 59, 92, .18); } .reel-act small { font-size: 12.5px; font-weight: 700; } .reel-act.static { cursor: default; } .reel-who { position: absolute; left: 14px; right: 80px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); font-weight: 700; } .reel-author { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; } .reel-who small { display: block; color: rgba(255, 255, 255, .75); font-weight: 400; } /* dernier commentaire sous l'auteur (un appui ouvre les commentaires) */ .reel-peek { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 13.5px; font-weight: 400; text-align: left; text-shadow: inherit; cursor: pointer; } .peek-last { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .peek-last b { font-weight: 700; } .peek-more { color: rgba(255, 255, 255, .7); font-size: 13px; } /* double appui : cœur qui grossit puis s'envole */ .reel-heart { position: absolute; z-index: 3; color: #ff3b5c; font-size: 96px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%) scale(.3); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); animation: reel-heart .8s ease-out forwards; } @keyframes reel-heart { 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(.95); } 45% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1.1); opacity: 0; } } .reel-act.like .ico { transition: transform .15s; } .reel-act.like.liked .ico { animation: like-pop .3s ease; } @keyframes like-pop { 50% { transform: scale(1.25); } } .reel-cam { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; justify-content: space-between; background: #000; color: #fff; } .cam-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cam-preview.mirror { transform: scaleX(-1); } .cam-top, .cam-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 14px; } .cam-bottom { padding: 14px 24px max(28px, env(safe-area-inset-bottom)); } .cam-time { padding: 4px 12px; border-radius: 12px; background: rgba(0, 0, 0, .5); font-weight: 700; font-variant-numeric: tabular-nums; } .cam-flip, .cam-import { background: rgba(0, 0, 0, .45); color: #fff; border-color: rgba(255, 255, 255, .3); } .cam-rec { --p: 0%; position: relative; display: grid; place-items: center; width: 78px; height: 78px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .35); cursor: pointer; } .cam-rec i { width: 60px; height: 60px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 20px rgba(255, 59, 92, .7); transition: .2s; } .cam-rec.on { background: conic-gradient(#ff3b5c var(--p), rgba(255, 255, 255, .35) 0); } .cam-rec.on i { width: 30px; height: 30px; border-radius: 8px; } /* ------------------------------------------------ stickers */ .msg .bubble.sticker-bubble { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 0 18px; } .sticker-img { display: block; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); } .sticker-bubble .meta { right: 4px; bottom: 0; } .sticker-tabs { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; } .sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .sticker-cell { position: relative; } .sticker-pick { width: 100%; aspect-ratio: 1; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: repeating-conic-gradient(#1b1b2e 0% 25%, #202036 0% 50%) 50% / 16px 16px; cursor: pointer; } .sticker-pick:hover { border-color: color-mix(in srgb, var(--c1) 60%, transparent); } .sticker-pick img { width: 100%; height: 100%; object-fit: contain; } .sticker-star, .sticker-del { position: absolute; top: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } .sticker-star { right: 4px; } .sticker-star.on { color: #ffd23f; } .sticker-del { left: 4px; } .sticker-empty { grid-column: 1 / -1; text-align: center; } .sticker-editor { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; background: #05050b; color: #fff; } .stk-area { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; } .stk-stage { position: relative; width: min(84vw, 52vh, 460px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: repeating-conic-gradient(#1b1b2e 0% 25%, #24243b 0% 50%) 50% / 24px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } .stk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .stk-ink { touch-action: none; cursor: crosshair; } .stk-text { position: absolute; transform: translate(-50%, -50%); max-width: 95%; font-weight: 800; line-height: 1.15; text-align: center; white-space: pre-wrap; cursor: grab; touch-action: none; user-select: none; } .stk-text.st-outline { color: #fff; -webkit-text-stroke: .08em #111; paint-order: stroke fill; } .stk-text.st-black { padding: 0 .3em; border-radius: .3em; background: #fff; color: #111; } .stk-text.st-glow { color: #fff; text-shadow: 0 0 .25em var(--c1), 0 0 .6em var(--c1); } .stk-tools { display: grid; gap: 10px; padding: 4px 16px; } .stk-colors { display: flex; justify-content: center; gap: 8px; } .stk-color { width: 30px; height: 30px; padding: 0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; background: var(--c); cursor: pointer; } .stk-color[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2), 0 0 14px var(--c); } .stk-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .stk-label { color: rgba(255, 255, 255, .6); font-size: 13px; } .stk-sizes { display: flex; gap: 4px; } .stk-sizes button { width: 34px; height: 30px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--glass-2); color: #fff; font-weight: 700; cursor: pointer; } .stk-sizes button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: var(--on-grad, #fff); } .sticker-editor .se-top strong { flex: 1; text-align: center; } /* ------------------------------------------------ vidéos en préparation (version légère calculée par le serveur) */ .video-wait, .reel-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; } .video-wait { width: 240px; max-width: 100%; height: 150px; border-radius: 16px; background: #000; } .reel-wait { position: absolute; inset: 0; padding: 10px; text-align: center; } .video-wait i, .reel-wait i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin 1s linear infinite; } .reel-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .reel-card:disabled { cursor: default; opacity: .8; } /* plusieurs reels importés d'un coup : une vignette par vidéo, avant de tout publier */ .rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } .rb-tile { position: relative; aspect-ratio: 9 / 14; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #000; } .rb-tile video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .rb-tile.failed { border-color: #ef4444; } .rb-tile.sent { opacity: .5; } .rb-remove { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: rgba(0, 0, 0, .55); color: #fff; } .rb-remove svg { width: 16px; height: 16px; } .rb-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 24px 8px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); } .rb-progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255, 255, 255, .18); } .rb-tile:not(.sending) .rb-progress { display: none; } .rb-progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s; } .rb-status { position: absolute; left: 8px; right: 8px; top: 42%; color: #fff; font-size: var(--text-xs); font-weight: 600; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); } .rb-status:empty { display: none; } /* (sur la vidéo : boutons clairs sur fond sombre quel que soit le thème, sinon Apple les met en bleu sur noir ; Windows 95 garde ses boutons gris) */ :root:not([data-ui="win95"]) .rb-tile .rb-actions .btn { background: rgba(0, 0, 0, .55); color: #fff; border-color: rgba(255, 255, 255, .3); } :root:not([data-ui="win95"]) .rb-tile .rb-remove { background: rgba(0, 0, 0, .55); color: #fff; } /* ------------------------------------------------ mini-jeux : onglet, classement, écran de jeu, défis */ .games-pane { padding: 6px 6px 12px; list-style: none; display: grid; gap: 8px; } .games-hint { margin: 0 4px 2px; font-size: var(--text-xs); } .game-card { display: grid; gap: 10px; width: 100%; padding: 14px; border: 5px solid var(--shell); border-radius: 26px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight); color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } @media (hover: hover) { .game-card:hover { background-color: var(--surface-2); } .gv-tab:hover { color: var(--text); } } .gc-head { display: flex; align-items: center; gap: 12px; } .gc-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--fill-strong); box-shadow: var(--highlight); font-size: 21px; } .gc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; } .gc-title small { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; } .gc-play { flex: none; padding: 6px 13px; border-radius: var(--radius-full); background: var(--cta); color: var(--on-cta); font-size: var(--text-xs); font-weight: 600; } .gc-empty { margin: 0; color: var(--text-faint); font-size: var(--text-xs); } .board { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .board li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); } .board .rank { width: 22px; flex: none; text-align: center; color: var(--text-faint); font-variant-numeric: tabular-nums; } .board .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board .pts { flex: none; font-family: var(--font-mono); font-weight: 650; } .board li.me .who { color: var(--accent-text); font-weight: 650; } .game-viewer { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } .gv-head { display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 14px 8px; flex: none; font-size: var(--text-md); font-weight: 600; } .gv-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; flex: none; scrollbar-width: none; } .gv-tabs::-webkit-scrollbar { display: none; } .gv-tab { flex: none; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--fill); color: var(--text-muted); font-size: var(--text-sm); font-weight: 550; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .gv-tab[aria-pressed="true"] { border-color: transparent; background: var(--text); color: var(--bg); } .gv-stage { flex: 1; min-height: 160px; display: grid; place-items: center; overflow: hidden; padding: 0 8px; } .gv-side { flex: none; max-height: 34%; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); } .gv-side h3 { margin: 0 0 8px; color: var(--text-faint); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .gm-wrap { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: #0b1020; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; } .gm-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; } .gm-hud { position: absolute; top: 6px; right: 10px; display: flex; gap: 12px; color: #fff; font: 700 14px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .5px; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); pointer-events: none; } .gm-best { color: rgba(255, 255, 255, .55); } .gm-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; background: rgba(6, 8, 14, .62); text-align: center; } .gm-title { font-size: 20px; font-weight: 800; } .gm-sub { max-width: 360px; color: #c4cad4; font-size: 13px; line-height: 1.4; } .gm-play { margin-top: 6px; } .game-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .game-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--glass-2); color: var(--text); text-align: left; cursor: pointer; } .game-pick:hover { border-color: color-mix(in srgb, var(--c1) 55%, transparent); } .game-pick:disabled { opacity: .5; cursor: default; } .gp-ico { font-size: 24px; } .game-pick small { color: var(--muted); font-size: 12px; min-height: 1em; } .bubble.game-bubble { min-width: min(290px, 100%); } .challenge { display: grid; gap: 8px; } .ch-head { display: flex; align-items: center; gap: 10px; } .ch-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(0, 0, 0, .2); font-size: 22px; } .ch-title { display: flex; flex-direction: column; min-width: 0; } .ch-title b { font-size: 15px; } .ch-title small, .ch-status { font-size: 12px; opacity: .78; } .challenge .board li.me .who { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .challenge .board .rank, .challenge .board li.waiting { color: inherit; opacity: .8; } .challenge .board li.lead .pts { color: inherit; } .ch-play { justify-self: start; margin-bottom: 14px; } .msg.in .ch-play { background: var(--grad); } /* ------------------------------------------------ mots de passe */ .modal input.pw-field { display: block; width: 100%; height: 42px; padding: 0 14px; margin-bottom: 10px; } .modal input.temp-pw { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: 1px; text-align: center; } /* ------------------------------------------------ activité, profils, edcoins */ /* bulle d'activité (comme sur Instagram) : pointe vers la cloche */ .inbox-pop { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 28px; margin-right: 8px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: #ff3040; color: #fff; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; } .inbox-pop[hidden] { display: none; } .inbox-pop::after { content: ""; position: absolute; top: 50%; right: -4px; width: 10px; height: 10px; border-radius: 2px; background: #ff3040; transform: translateY(-50%) rotate(45deg); } .inbox-pop span { display: inline-flex; align-items: center; gap: 3px; } .inbox-pop svg { width: 14px; height: 14px; fill: currentColor; } .inbox-pop.pop { animation: inbox-pop .45s var(--ease-out); } @keyframes inbox-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .inbox-count { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: var(--pink); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #0e0e11; } .inbox { display: grid; gap: 2px; } .inbox-empty { margin: 24px 6px; text-align: center; } .act-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: var(--radius-lg); background: none; color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); } @media (hover: hover) { .act-row:hover { background: var(--fill); } } .act-row.unread { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px var(--border); } .act-face { position: relative; flex: none; } .act-kind { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-1); font-size: 11px; font-weight: 800; } .act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .act-text { font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .act-body small { color: var(--text-faint); font-size: 11.5px; } .act-thumb { width: 38px; height: 56px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: #000; } .act-game { flex: none; font-size: 26px; } .rc-face { flex: none; padding: 0; border: 0; background: none; cursor: pointer; } .reel-author { cursor: pointer; } .reels-top { display: flex; gap: 6px; margin-bottom: 10px; } .reels-top .reels-new { flex: 1; margin: 0; min-width: 0; } .reels-wallet { flex: none; padding: 0 12px; font-variant-numeric: tabular-nums; } .reels-me { flex: none; width: 40px; padding: 0; } .reels-seg { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; } .pf-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; } .pf-head .avatar.lg { width: 80px; height: 80px; font-size: 30px; flex: none; } .pf-main { flex: 1; min-width: 0; display: grid; gap: 8px; font-weight: 650; font-size: var(--text-lg); } .pf-stats { display: flex; gap: 18px; } .pf-stat { display: flex; flex-direction: column; } .pf-stat b { font-size: var(--text-md); font-weight: 650; font-variant-numeric: tabular-nums; } .pf-stat small { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; } .pf-actions, .pf-trade { display: flex; flex-wrap: wrap; gap: 6px; } .pf-market { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); } .pf-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pf-price small { color: var(--text-muted); font-size: var(--text-xs); } .pf-sub { margin: 10px 0; font-size: var(--text-xs); } .up { color: var(--ok) !important; } .down { color: var(--danger-text) !important; } .trade-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; font-weight: 550; } .modal input.trade-n { width: 110px; height: 40px; margin: 0; padding: 0 12px; font-size: var(--text-lg); text-align: center; } .trade-info { color: var(--text-muted); font-size: var(--text-sm); } .eco-balance { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: var(--radius-xl); background: var(--bg); border: 1px solid var(--border); } .eco-balance small { color: var(--text-muted); } .eco-balance b { font-size: var(--text-2xl); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .eco-help { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: var(--text-sm); } .eco-help summary { cursor: pointer; font-weight: 600; } .eco-help ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-muted); line-height: 1.5; } .eco-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .eco-person { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--text-base); font-weight: 550; text-align: left; cursor: pointer; } .eco-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eco-mid { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; } .eco-mid small { color: var(--text-muted); font-size: 11.5px; } .eco-note { color: var(--text-faint); font-size: var(--text-xs); } .eco-history { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; } .eco-hist { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; font-size: var(--text-sm); } .eco-hist span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eco-hist b { flex: none; font-variant-numeric: tabular-nums; } /* ------------------------------------------------ notes de version */ .notes-list { display: grid; gap: 8px; } .note-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); } .note-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--fill-strong); font-size: 20px; } .note-item b { font-size: var(--text-md); font-weight: 600; } .note-item p { margin: 3px 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; } /* ------------------------------------------------ appels audio */ .call-ui, .call-ring { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; color: #fff; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c1) 34%, #07070e), #07070e 72%); padding: max(14px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom)); } .call-top { display: flex; align-items: center; gap: 12px; } .call-top .icon-btn { color: #fff; } .call-title { display: flex; flex-direction: column; min-width: 0; } .call-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; } .call-title small { color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; } .call-grid { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 24px 26px; padding: 20px 0; overflow-y: auto; } .call-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 108px; text-align: center; } .call-tile .avatar { width: 84px; height: 84px; border-radius: 50%; font-size: 30px; transition: box-shadow .12s; } .call-tile.speaking .avatar { box-shadow: 0 0 0 3px var(--c3); } .call-tile b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .call-tile small { min-height: 1.2em; color: rgba(255, 255, 255, .65); font-size: 12px; } .call-controls, .ring-actions { display: flex; justify-content: center; gap: 44px; } .call-act { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255, 255, 255, .8); } .call-btn { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; } .call-btn svg { width: 28px; height: 28px; } .call-btn.off { background: #fff; color: #111; } .call-btn.hang { background: #ff3b5c; } .call-btn.hang svg { transform: rotate(135deg); } .call-btn.answer { background: #22c55e; animation: answer-bounce 1.2s ease-in-out infinite; } @keyframes answer-bounce { 50% { transform: translateY(-5px); } } .call-ring { align-items: center; justify-content: center; gap: 8px; text-align: center; } .ring-face { margin-bottom: 14px; border-radius: 50%; animation: ring-pulse 1.4s ease-out infinite; } .ring-face .avatar { width: 116px; height: 116px; border-radius: 50%; font-size: 40px; } @keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); } 100% { box-shadow: 0 0 0 26px rgba(34, 197, 94, 0); } } .call-ring strong { font-size: 24px; } .call-ring small { color: rgba(255, 255, 255, .7); font-size: 14px; } .ring-actions { margin-top: 56px; gap: 80px; } .call-pill { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); z-index: 44; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 8px 16px; border: 0; border-radius: 99px; background: #16a34a; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); cursor: pointer; } .call-pill-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #fff; animation: rec-blink 1s ease-in-out infinite; } .call-audio { display: none; } .call-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 8px 16px; flex: none; border-bottom: 1px solid var(--line); background: rgba(34, 197, 94, .14); font-size: 13.5px; font-weight: 600; } .call-join { border-color: transparent; background: #22c55e; color: #fff; } .call-join.ghost { background: rgba(34, 197, 94, .22); color: #bbf7d0; padding: 0 10px; } .call-join svg { width: 18px; height: 18px; fill: currentColor; } #call-btn.in-call { color: #22c55e; } .call-banner-info { display: flex; align-items: center; gap: 8px; min-width: 0; } .call-banner-actions { display: flex; gap: 6px; flex: none; } /* qui est dans l'appel : photos qui se chevauchent + prénoms */ .call-people { display: flex; align-items: center; gap: 8px; min-width: 0; } .call-faces { display: flex; flex: none; } .call-face { position: relative; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px #0f1a14; } .call-face:first-child { margin-left: 0; } .call-face .avatar { width: 26px; height: 26px; font-size: 11px; } .call-face i { position: absolute; right: -5px; bottom: -4px; font-size: 11px; font-style: normal; } .call-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ring-people { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; } .ring-people .call-face { box-shadow: 0 0 0 2px #07070e; } .ring-people .call-face .avatar { width: 34px; height: 34px; font-size: 13px; } .ring-people .call-names { color: #fff; font-size: 14px; white-space: normal; text-align: center; } .live-call { color: #4ade80; font-weight: 700; } /* vidéo */ .call-btn.on { background: #fff; color: #111; } .call-video { width: 100%; height: 100%; object-fit: cover; background: #000; border-radius: inherit; } .call-video.mirror { transform: scaleX(-1); } .call-grid.has-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 10px; padding: 14px 0; } .call-grid.has-video .call-tile { width: auto; height: 100%; min-height: 150px; justify-content: center; border-radius: 18px; background: rgba(255, 255, 255, .06); overflow: hidden; position: relative; } .call-tile.video { padding: 0; } .call-tile.video.speaking { box-shadow: 0 0 0 3px var(--c3); } .call-label { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* à deux : l'autre en grand, soi en vignette dans le coin */ .call-grid.pair { display: block; position: relative; padding: 12px 0; } .call-grid.pair .call-tile:not(.me) { position: absolute; inset: 12px 0; height: auto; } .call-grid.pair .call-tile.me { position: absolute; right: 10px; bottom: 22px; z-index: 1; width: 104px; height: 146px; min-height: 0; border-radius: 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, .55); } .call-grid.pair .call-tile.me:not(.video) { display: none; } .call-grid.pair .call-tile.me .call-label { font-size: 11px; left: 5px; bottom: 5px; } .call-controls { flex-wrap: wrap; gap: 26px; } @media (max-width: 760px) { .call-controls { gap: 18px; } .call-btn { width: 58px; height: 58px; } .call-grid.has-video:not(.pair) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* appel réduit : fine barre verte tout en haut ; la page descend d'autant au lieu d'être cachée */ body.call-strip { --strip: calc(30px + env(safe-area-inset-top)); } body.call-strip .call-pill { left: 0; right: 0; top: 0; transform: none; max-width: none; height: var(--strip); justify-content: center; padding: env(safe-area-inset-top) 12px 0; border-radius: 0; box-shadow: none; font-size: 12.5px; } html.kb body.call-strip .call-pill { top: var(--vv-top, 0px); } body.call-strip .layout, body.call-strip .panel, body.call-strip .history { top: var(--strip); } html.kb body.call-strip .layout, html.kb body.call-strip .panel, html.kb body.call-strip .history { top: calc(var(--vv-top, 0px) + var(--strip)); height: calc(var(--vv-height, 100dvh) - var(--strip)); } body.call-strip .topbar, body.call-strip .chat-head, body.call-strip .panel-head, body.call-strip .history-head { padding-top: 0; } } /* ------------------------------------------------ reel partagé dans une discussion */ .reel-share-card { position: relative; display: block; width: 150px; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #000; color: #fff; cursor: pointer; } .reel-share-card img { width: 100%; height: 100%; object-fit: cover; } .rs-empty { display: grid; place-items: center; height: 100%; font-size: 34px; } .rs-play { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 44px; height: 44px; padding-left: 3px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .5); font-size: 18px; } .rs-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); text-align: left; font-size: 13px; } .rs-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-info small { opacity: .75; font-size: 11.5px; } .bubble.reel-share .meta { bottom: auto; top: 10px; } .reel-gone { padding: 8px 10px; font-size: 13.5px; opacity: .75; font-style: italic; } .share-list { max-height: min(46vh, 360px); overflow-y: auto; margin-bottom: 10px; } /* ------------------------------------------------ commentaires des reels : volet qui monte du bas */ .rc-back { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .35); } .rc-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; max-height: 62%; min-height: 40%; max-width: 560px; margin: 0 auto; border-radius: 20px 20px 0 0; background: var(--surface-1); border-top: 1px solid var(--line-2); color: var(--text); box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); animation: rise .2s ease; } .rc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 18px; border-bottom: 1px solid var(--line); flex: none; } .rc-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px; } .rc-empty { margin: 24px 0; text-align: center; font-size: 13.5px; } .rc-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; } .rc-body { flex: 1; min-width: 0; } .rc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-weight: 700; } .rc-meta small { color: var(--faint); font-weight: 400; font-size: 11.5px; } .rc-text { margin-top: 2px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; } /* réponses : décalées sous le commentaire, avatar plus petit */ .rc-replies { margin-left: 44px; } .rc-item.reply { padding: 6px 0; } .rc-item.reply .avatar.xs { width: 26px; height: 26px; border-radius: 9px; font-size: 11px; } .rc-actions { display: flex; gap: 14px; margin-top: 3px; } .rc-link, .rc-more { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .rc-link:hover, .rc-more:hover { color: var(--text); } .rc-more { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; } .rc-more::before { content: ""; width: 22px; height: 1px; background: var(--line-2); } .mention { color: var(--c3); font-weight: 700; } /* suggestions de pseudos (« @… ») et bandeau « Réponse à … », juste au-dessus du champ */ .rc-suggest { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 0; flex: none; scrollbar-width: none; } .rc-suggest::-webkit-scrollbar { display: none; } .rc-sug { display: flex; align-items: center; gap: 7px; flex: none; padding: 4px 11px 4px 4px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--glass-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; } .rc-sug .avatar.xs { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; } .rc-replybar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 10px 0; padding: 2px 4px 2px 12px; border-radius: 10px; background: var(--glass-2); color: var(--muted); font-size: 12.5px; flex: none; } .rc-compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex: none; } .rc-compose textarea { flex: 1; min-height: 42px; max-height: 110px; padding: 10px 12px; resize: none; line-height: 20px; } .rc-compose .send-btn { width: 42px; height: 42px; } /* GIF Giphy : grille en colonnes (chaque GIF garde ses proportions) */ .giphy-grid { columns: 3 110px; column-gap: 6px; min-height: 120px; } .giphy-item { display: block; width: 100%; margin: 0 0 6px; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: var(--surface-2); cursor: pointer; break-inside: avoid; } .giphy-item img { display: block; width: 100%; height: auto; } .giphy-msg { column-span: all; margin: 30px 10px; text-align: center; } .giphy-more { display: flex; margin: 8px auto 0; } .giphy-credit { margin: 10px 0 0; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-align: center; } .giphy-status { margin: 0 0 6px; font-size: 12.5px; } /* photo et sticker dans les commentaires */ .rc-compose { gap: 4px; } .rc-media { width: 32px; height: 42px; flex: none; font-size: 19px; } .rc-gif { font-size: 11px; font-weight: 800; letter-spacing: .3px; } .rc-attach { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 4px 4px 4px 4px; border-radius: 12px; background: var(--glass-2); color: var(--muted); font-size: 12.5px; flex: none; } .rc-attach img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; } .rc-attach span { flex: 1; } .rc-photo { display: block; max-width: min(200px, 100%); max-height: 220px; margin-top: 6px; border-radius: 12px; object-fit: cover; cursor: zoom-in; } .rc-sticker { display: block; width: 96px; height: 96px; margin-top: 4px; object-fit: contain; } /* ------------------------------------------------ lives */ .avatar.is-live { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff2d55, 0 0 14px 3px rgba(255, 45, 85, .55); animation: live-ring 1.8s ease-in-out infinite; } @keyframes live-ring { 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff6b8a, 0 0 22px 6px rgba(255, 45, 85, .35); } } .live-tag { flex: none; padding: 2px 6px; border-radius: 5px; background: #ff2d55; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; } .live-new-ico { background: linear-gradient(135deg, #ff2d55, #ff8a00) !important; font-size: 22px; } .live-ui { position: fixed; inset: 0; z-index: 28; overflow: hidden; background: #000; color: #fff; } .live-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } .live-video.mirror { transform: scaleX(-1); } .live-waiting { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: rgba(255, 255, 255, .8); } .live-waiting[hidden] { display: none; } .live-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 24px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); } .live-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .live-chip { flex: none; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .4); font-size: 12.5px; font-weight: 700; } /* live réduit : une pastille ramène à l'écran du live (qui continue pendant ce temps) */ .live-mini { position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 27; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(10, 10, 12, .88); color: #fff; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); cursor: pointer; } .live-space { flex: 1; } .live-top .icon-btn { flex: none; color: #fff; background: rgba(0, 0, 0, .35); } .live-title { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 46px); left: 14px; right: 14px; z-index: 2; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); } .live-unmute { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); padding: 12px 18px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .65); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .live-unmute[hidden] { display: none; } .live-comments { position: absolute; left: 12px; right: 76px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 2; display: flex; flex-direction: column; gap: 7px; max-height: 42%; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); } .live-comment { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); animation: rise .2s ease; } .live-comment .avatar { flex: none; } .live-comment span { overflow-wrap: anywhere; } .live-hearts { position: absolute; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 2; width: 56px; height: 55%; pointer-events: none; } .live-hearts span { position: absolute; bottom: 0; right: 12px; font-size: 26px; animation: live-heart 2.2s ease-out forwards; } @keyframes live-heart { from { transform: translate(0, 0) scale(.5); opacity: 1; } to { transform: translate(var(--dx), -330px) scale(1.15); opacity: 0; } } .live-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 8px; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); } .live-bar input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 22px; background: rgba(255, 255, 255, .12); color: #fff; } .live-heart-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 20px; cursor: pointer; } /* ------------------------------------------------ administration (grande fenêtre à onglets) */ .modal.huge { max-width: 1040px; height: min(900px, 100%); max-height: 100%; } .modal.huge .modal-body { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; } .admin-tabs { display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--fill); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex: none; } .admin-tabs::-webkit-scrollbar { display: none; } .admin-tabs button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 550; cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } @media (hover: hover) { .admin-tabs button:hover { color: var(--text); } } .admin-tabs button[aria-selected="true"] { background: var(--cta); color: var(--on-cta); } .admin-body { flex: 1; min-height: 0; } .admin-toolbar { position: sticky; top: -1px; z-index: 1; display: flex; gap: 8px; padding: 6px 0 8px; background: var(--surface-1); } .modal .admin-toolbar input { flex: 1; min-width: 0; height: 42px; margin: 0; border-radius: var(--radius-full); } .admin-toolbar select { flex: none; width: auto; max-width: 46%; height: 38px; } .admin-count { margin: 2px 0 4px; font-size: var(--text-xs); } .admin-group-head { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--fill); } .admin-group-head .muted { flex: none; font-size: var(--text-xs); font-weight: 600; } .report-conv { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass-2); } .report-conv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; } .report-conv-head b { font-size: 15.5px; } .report-count { padding: 2px 9px; border-radius: 9px; background: rgba(255, 61, 90, .18); color: #ff8fa3; font-size: 12.5px; font-weight: 700; } .report-author { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .report-author-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .report-msg { margin: 8px 0 0 42px; padding: 8px 12px; border-left: 3px solid #ff3d5a; border-radius: 0 10px 10px 0; background: rgba(255, 61, 90, .07); } .report-msg p { margin: 0; overflow-wrap: anywhere; } .report-msg small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; } .report-quote { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid #ff3d5a; border-radius: 0 12px 12px 0; background: var(--glass-2); overflow-wrap: anywhere; } .warning-box { margin-bottom: 10px; padding: 14px 16px; border: 1px solid rgba(255, 176, 32, .45); border-radius: 14px; background: rgba(255, 176, 32, .1); } .warning-box p { margin: 0 0 4px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; } .notice-box { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--glass-border, rgba(255, 255, 255, .18)); border-radius: 14px; background: var(--glass-2); } .notice-box p { margin: 0; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; } .notice-coins { margin: 0 0 4px; font-weight: 700; color: #facc15; } /* boutons et pastilles posés sur une photo, une vidéo ou un fond d'écran : verre flouté plutôt que simple transparence (pas sur les heures des photos d'une discussion, trop nombreuses pour le défilement, ni sur l'écran de jeu Pokeddy) */ .upload-tag, .reel-act .ico, .cam-time, .cam-flip, .cam-import, .sticker-star, .sticker-del, .rb-remove, .gm-overlay, .call-label, .rs-play, .rc-back, .live-chip, .live-top .icon-btn, .live-unmute, .live-reactions, .ov-goal, .ov-ticker, .messages.has-wp .sys, .messages.has-wp .day, .bf-modal { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } /* annonce de la nouvelle adresse (addressAnim dans app.js) */ .addr-anim { position: relative; display: flex; justify-content: center; padding: 26px 0 22px; } .addr-bar { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 50px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--glass-border, rgba(255, 255, 255, .18)); background: var(--glass-2); font: 600 clamp(11px, 3.2vw, 15px)/1 var(--font-mono); white-space: nowrap; overflow: hidden; transition: transform .7s cubic-bezier(.2, .9, .3, 1.4), border-color .7s, box-shadow .9s; } .addr-lock { font-size: .9em; } .addr-text { display: inline-flex; align-items: center; } .addr-ch { display: inline-block; max-width: 1em; } .addr-new { font-size: 1.5em; font-weight: 800; letter-spacing: -.01em; color: var(--accent-text); } .addr-caret { flex: none; width: 2px; height: 1.3em; border-radius: 1px; background: var(--accent); animation: addr-blink 1s steps(1) infinite; } .addr-grow { transform: scale(1.06); border-color: var(--accent-border); } .addr-done { transform: scale(1.1); box-shadow: 0 0 0 1px var(--accent-border), 0 0 28px var(--accent-soft), 0 0 70px color-mix(in srgb, var(--c2) 35%, transparent); } .addr-done .addr-caret { display: none; } .addr-done .addr-text { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: addr-shine 3s linear infinite; } .addr-done .addr-new { color: transparent; } .addr-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; } @keyframes addr-blink { 50% { opacity: 0; } } @keyframes addr-shine { to { background-position: 300% 0; } } @media (prefers-reduced-motion: reduce) { .addr-caret, .addr-done .addr-text { animation: none; } } @media (max-width: 700px) { .modal.huge { height: 100%; max-height: 100%; border-radius: 0; } .report-msg { margin-left: 0; } }.report-more { display: block; margin: 8px 0 0 42px; } /* ------------------------------------------------ lives programmés : stories qui brillent, cartes à compte à rebours */ .story-ring.plan-glow { position: relative; background: conic-gradient(from 0deg, #ff2d55, #ff8a00, #ffd60a, #ff2d55); box-shadow: 0 0 16px -2px #ff5a36; animation: plan-glow 1.8s ease-in-out infinite; } @keyframes plan-glow { 50% { box-shadow: 0 0 24px 2px rgba(255, 90, 54, .8); } } .plan-count { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 5px; border-radius: 7px; background: #ff2d55; color: #fff; font-size: 9.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); } .story-ring.plan-glow.big { display: inline-block; padding: 3px; border-radius: 19px; cursor: default; } .plan-sheet { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0; } .plan-sheet p { margin: 0; } .plan-sheet-title { font-size: 17px; } .plan-big-count { margin: 6px 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #ff2d55, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-tag { flex: none; font-size: 13px; } .plan-countdown { margin-top: 3px; color: #ff8a65; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .live-actions-row { display: flex; gap: 8px; margin: 0 2px 10px; } .live-actions-row .btn { flex: 1; } .live-card-title { font-weight: 700; } .live-card-count { margin: 6px 0 8px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .live-card-count.ticking { font-size: 19px; background: linear-gradient(90deg, #ff2d55, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; } .live-card-btn[hidden] { display: none; } .aud-box label { display: grid; gap: 6px; } .aud-people { max-height: 260px; margin-top: 8px; overflow-y: auto; } .aud-people[hidden] { display: none; } .ov-check { display: flex; align-items: center; gap: 10px; margin: 6px 0; cursor: pointer; font-weight: 600; } .ov-check input { width: 18px; height: 18px; accent-color: var(--violet); flex: none; } /* ------------------------------------------------ live : réactions, dons, alertes, overlays */ .live-reactions { position: absolute; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; border-radius: 18px; background: rgba(0, 0, 0, .6); animation: rise .15s ease; } .live-reactions[hidden] { display: none; } .live-reactions button { width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 23px; cursor: pointer; } .live-reactions button:active { transform: scale(1.2); } .live-don-btn { background: linear-gradient(135deg, #ffd60a, #ff8a00); } .live-tts { font-size: 16px; } .live-comment.donation span { padding: 3px 8px; border-radius: 10px; background: rgba(255, 176, 32, .25); } .live-comment em { font-style: normal; color: #ffd60a; font-weight: 700; } .don-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .modal input[type="number"] { width: 100%; height: 42px; padding: 0 14px; margin-bottom: 10px; } .live-alert { position: absolute; top: 24%; left: 50%; z-index: 4; width: min(460px, calc(100% - 24px)); transform: translateX(-50%); padding: 16px 18px; border-radius: 20px; background: rgba(12, 12, 24, .88); border: 2px solid var(--alert-color, #ff2d55); box-shadow: 0 0 40px -6px var(--alert-color, #ff2d55); text-align: center; animation: live-alert-in .5s cubic-bezier(.3, 1.5, .5, 1); } .live-alert[hidden] { display: none; } @keyframes live-alert-in { from { transform: translate(-50%, -30px) scale(.7); opacity: 0; } } .live-alert-ico { font-size: 44px; line-height: 1; animation: live-alert-bounce 1s ease-in-out infinite; } @keyframes live-alert-bounce { 50% { transform: translateY(-6px) rotate(-6deg); } } .live-alert-head { margin-top: 4px; font-size: 18px; font-weight: 700; } .live-alert-head b { color: var(--alert-color, #ff2d55); } .live-alert-text { margin-top: 8px; font-size: 20px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .live-alert.small { width: auto; max-width: calc(100% - 24px); padding: 8px 14px; border-width: 1px; font-weight: 700; } .live-overlays { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .ov-banner { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 76px); left: 12px; max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 10px; background: var(--ov-color, #ff2d55); color: #fff; font-size: 16px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); } .ov-goal { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 118px); left: 12px; width: min(260px, calc(100% - 24px)); padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .55); } .ov-goal-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; } .ov-goal-bar { height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; } .ov-goal-bar i { display: block; height: 100%; border-radius: 4px; transition: width .6s ease; } .ov-ticker { position: absolute; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); overflow: hidden; padding: 5px 0; background: rgba(0, 0, 0, .55); white-space: nowrap; font-weight: 700; } .ov-ticker span { display: inline-block; padding-left: 100%; animation: ov-ticker 16s linear infinite; } @keyframes ov-ticker { to { transform: translateX(-100%); } } .ov-image { position: absolute; max-height: 30%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); } .ov-image.tl { top: calc(max(12px, env(safe-area-inset-top)) + 170px); left: 12px; } .ov-image.tr { top: calc(max(12px, env(safe-area-inset-top)) + 76px); right: 12px; } .ov-image.bl { bottom: calc(110px + env(safe-area-inset-bottom)); left: 12px; } .ov-image.br { bottom: calc(110px + env(safe-area-inset-bottom)); right: 12px; } .ov-section { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); } .ov-section input[type="text"] { margin-bottom: 6px; } .ov-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 13.5px; } .ov-inline input[type="number"] { width: 110px; margin: 0; } .ov-inline input[type="color"] { width: 44px; height: 32px; padding: 0; border: 0; background: none; } .ov-inline select { width: auto; } .ov-preview { max-width: 64px; max-height: 64px; border-radius: 8px; } .ov-preview[hidden] { display: none; } .aud-sep { height: 1px; margin: 12px 0; background: var(--line); } /* ------------------------------------------------ écran du live : image + widgets (9:16 sur ordinateur, plein écran sur téléphone) */ .live-stage { position: absolute; inset: 0; overflow: hidden; } @media (min-width: 700px) { .live-stage { left: 50%; right: auto; width: min(100%, calc(100vh * 9 / 16)); transform: translateX(-50%); } } /* écran partagé : l'image prend toute la place (16:9), sans être rognée ; la webcam en petit, en bas à droite */ .live-ui.sharing .live-stage { left: 0; right: 0; width: auto; transform: none; } .live-ui.sharing .live-video { object-fit: contain; } .live-pip { position: absolute; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 1; width: min(24%, 240px); aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid rgba(255, 255, 255, .75); border-radius: 14px; background: #111; box-shadow: 0 6px 22px rgba(0, 0, 0, .55); } .live-pip[hidden] { display: none; } .live-pip.mirror { transform: scaleX(-1); } .live-mode { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; } .live-top .icon-btn.on { background: #ef4444; } .ov-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; container-type: size; } #ov-widgets { position: absolute; inset: 0; } .ovw { position: absolute; box-sizing: border-box; padding: .35em .6em; font-size: calc(var(--fs, 4.5) * 1cqw); line-height: 1.25; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } .ovw-image { padding: 0; } .ovw-image img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); } .ovw-ticker { overflow: hidden; white-space: nowrap; overflow-wrap: normal; } .ovw-ticker span { display: inline-block; padding-left: 100%; animation: ov-ticker 16s linear infinite; } .ovw-goal-head { display: flex; justify-content: space-between; gap: .5em; font-size: .9em; } .ovw-goal-bar { height: .55em; margin-top: .35em; border-radius: .3em; background: rgba(255, 255, 255, .2); overflow: hidden; } .ovw-goal-bar i { display: block; height: 100%; border-radius: .3em; transition: width .6s ease; } .ovw-alert { padding: .8em 1em; text-align: center; border: 2px solid var(--alert-color, #ff2d55); box-shadow: 0 0 40px -6px var(--alert-color, #ff2d55); } .ovw-alert[hidden] { display: none; } .ovw-alert.small { padding: .4em .8em; } .ova-ico { font-size: 2.2em; line-height: 1; animation: live-alert-bounce 1s ease-in-out infinite; } .ova-head { margin-top: .2em; font-size: .95em; } .ova-head b { color: var(--alert-color, #ff2d55); } .ova-text { margin-top: .35em; font-size: 1.1em; line-height: 1.3; } .ova-join { font-size: .8em; } .anim-pop { animation: ova-pop .5s cubic-bezier(.3, 1.5, .5, 1); } .anim-slide { animation: ova-slide .5s cubic-bezier(.2, .9, .3, 1.2); } .anim-bounce { animation: ova-bounce .9s ease; } .anim-fade { animation: ova-fade .7s ease; } .anim-shake { animation: ova-pop .4s ease, ova-shake .5s .4s ease; } @keyframes ova-pop { from { transform: scale(.4); opacity: 0; } } @keyframes ova-slide { from { transform: translateX(-120%); opacity: 0; } } @keyframes ova-bounce { 0% { transform: translateY(-80%); opacity: 0; } 55% { transform: translateY(8%); opacity: 1; } 75% { transform: translateY(-4%); } } @keyframes ova-fade { from { opacity: 0; } } @keyframes ova-shake { 20%, 60% { transform: translateX(-4%) rotate(-2deg); } 40%, 80% { transform: translateX(4%) rotate(2deg); } } /* ------------------------------------------------ éditeur d'overlays (comme Streamlabs) */ .ov-editor { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } .ove-head { display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); flex: none; } .ove-head b { font-size: 16px; white-space: nowrap; } .ove-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; } .ove-center { min-height: 0; display: grid; place-items: center; padding: 14px; background: repeating-conic-gradient(#12121f 0% 25%, #0e0e1a 0% 50%) 50% / 24px 24px; } .ove-stage { position: relative; container-type: size; height: 100%; max-height: 100%; aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--line-2); touch-action: none; } .ove-bg { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #3b1d6e, #12264f 55%, #0d3b3a); } .ove-bg span { color: rgba(255, 255, 255, .14); font-size: 7cqw; font-weight: 900; letter-spacing: .1em; } .ove-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ove-cam.mirror { transform: scaleX(-1); } .ove-layer { pointer-events: auto; } .ove-w { cursor: grab; touch-action: none; user-select: none; outline: 1px dashed rgba(255, 255, 255, .25); outline-offset: 2px; } .ove-w.selected { outline: 2px solid #38bdf8; outline-offset: 3px; cursor: move; } .ove-w.ovw-alert { display: block; } .ove-handle { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 5px; background: #38bdf8; border: 2px solid #fff; cursor: ew-resize; touch-action: none; } .ove-guide { position: absolute; z-index: 2; background: #ff2d55; pointer-events: none; } .ove-guide[hidden] { display: none; } .ove-guide.v { top: 0; bottom: 0; left: 50%; width: 1px; } .ove-guide.h { left: 0; right: 0; top: 50%; height: 1px; } .ove-side { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg-subtle); } .ove-tabs { display: none; } .ove-panel { overflow-y: auto; padding: 12px 14px; } .ove-panel-list { flex: none; max-height: 42%; border-bottom: 1px solid var(--line); } .ove-panel-props { flex: 1; min-height: 0; } .ove-sec { margin: 12px 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; } .ove-sec:first-child { margin-top: 0; } .ove-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; cursor: pointer; } .ove-row:hover { background: var(--glass-2); } .ove-row.selected { background: rgba(56, 189, 248, .16); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .5); } .ove-row.off .ove-name { opacity: .45; text-decoration: line-through; } .ove-ico { flex: none; width: 22px; text-align: center; } .ove-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; } .ove-row button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--glass-2); color: var(--text); cursor: pointer; font-size: 12px; } .ove-add { width: 100%; margin-top: 8px; } .ove-props-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .ove-field { display: grid; gap: 5px; margin: 8px 0; font-size: 13px; } .ove-field > span { display: flex; justify-content: space-between; color: var(--muted); } .ove-field input[type="text"], .ove-field input[type="number"], .ove-field select { width: 100%; height: 38px; margin: 0; padding: 0 10px; } .ove-field input[type="range"] { width: 100%; accent-color: #38bdf8; } .ove-field input[type="color"] { width: 100%; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; } .ove-btns { display: flex; gap: 8px; margin-top: 10px; } .ove-hint { line-height: 1.5; } @media (max-width: 899px) { .ove-head .btn:not(.primary):first-of-type { display: none; } .ove-main { grid-template-columns: 1fr; grid-template-rows: 52% 48%; } .ove-center { padding: 8px; } .ove-side { border-left: 0; border-top: 1px solid var(--line); } .ove-tabs { display: flex; gap: 4px; padding: 6px 10px 0; flex: none; } .ove-tabs button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: var(--glass-2); color: var(--muted); font: inherit; font-weight: 700; } .ove-tabs button[aria-selected="true"] { background: #38bdf8; color: #06131c; } .ove-panel-list { max-height: none; flex: 1; border: 0; } .ove-panel-props { display: none; } .ove-side.show-props .ove-panel-list { display: none; } .ove-side.show-props .ove-panel-props { display: block; } } /* ------------------------------------------------ flammes (comme sur Snap) */ .streak { flex: none; margin-left: 4px; padding: 1px 6px; border-radius: 9px; background: rgba(255, 122, 26, .16); color: #ffb35c; font-size: 12px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .streak.warn { background: rgba(255, 176, 32, .22); color: #ffd166; animation: streak-warn 1.4s ease-in-out infinite; } @keyframes streak-warn { 50% { opacity: .55; } } #chat-name { display: flex; align-items: center; min-width: 0; } /* ------------------------------------------------ sondages : qui a voté quoi */ .poll-faces { position: relative; z-index: 1; display: inline-flex; flex: none; margin-left: auto; } .poll-faces .avatar { width: 20px; height: 20px; border-radius: 7px; font-size: 9px; margin-left: -6px; box-shadow: 0 0 0 2px #1a1a30; } .poll-faces .avatar:first-child { margin-left: 0; } .poll-faces .avatar.photo img { border-radius: 7px; } .poll-votes-q { margin: 0 0 2px; font-size: 16px; font-weight: 700; } .poll-votes-opt { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); } .poll-votes-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .poll-voter { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 600; } .poll-none { margin: 2px 0; } /* ------------------------------------------------ Pokeddy (monde 2D) */ .pk-card { border-color: rgba(76, 175, 80, .5); background: linear-gradient(135deg, rgba(76, 175, 80, .18), rgba(56, 189, 248, .12)); } .pk-game { position: fixed; inset: 0; z-index: 28; overflow: hidden; background: #1a3d1a; touch-action: none; user-select: none; -webkit-user-select: none; } .pk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } .pk-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 18px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); color: #fff; } .pk-top b { font-size: 16px; white-space: nowrap; } .pk-chip, .pk-count { padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .45); font-size: 12px; font-weight: 700; white-space: nowrap; } .pk-top .icon-btn { color: #fff; background: rgba(0, 0, 0, .35); flex: none; } .pk-top-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; } .pk-top-right { flex: none; display: flex; align-items: center; gap: 6px; } @media (max-width: 560px) { .pk-top { gap: 6px; padding-left: 10px; padding-right: 10px; } .pk-top .pk-chip, .pk-top .pk-lbl { display: none; } .pk-top .btn.small { padding: 0 10px; } .pk-top .pk-iconbtn, .pk-top .pk-dexbtn { padding-left: 4px; padding-right: 4px; } /* (les icônes de 24 px ne doivent pas écraser le titre) */ .pk-top-right { gap: 4px; } } .pk-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px max(18px, env(safe-area-inset-bottom)); pointer-events: none; } .pk-pad { position: relative; width: 150px; height: 150px; pointer-events: auto; } .pk-pad { border-radius: 50%; background: rgba(12, 12, 26, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); touch-action: none; } .pk-pad span, .pk-a { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 14px; background: rgba(12, 12, 26, .55); color: #fff; font-size: 18px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); touch-action: none; cursor: pointer; pointer-events: none; } .pk-pad span.on, .pk-a:active { background: rgba(56, 189, 248, .7); } .pk-a { pointer-events: auto; } .pk-pad-up { left: 50px; top: 0; } .pk-pad-down { left: 50px; bottom: 0; } .pk-pad-left { left: 0; top: 50px; } .pk-pad-right { right: 0; top: 50px; } .pk-a { position: relative; width: 70px; height: 70px; border-radius: 50%; font-size: 22px; font-weight: 900; pointer-events: auto; margin-bottom: 40px; } @media (hover: hover) and (pointer: fine) { .pk-controls { opacity: .55; } } .pk-dialog { position: absolute; left: 50%; bottom: max(190px, calc(env(safe-area-inset-bottom) + 190px)); z-index: 3; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); padding: 14px 18px 20px; border: 4px solid #2b2b4a; border-radius: 14px; background: #fdfdf7; color: #1d1d2b; font-family: "Monocraft", ui-monospace, monospace; font-size: 15px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: rise .15s ease; } .pk-dialog p { margin: 0; white-space: pre-line; } .pk-dialog span { position: absolute; right: 14px; bottom: 6px; font-size: 12px; animation: live-alert-bounce 1s ease-in-out infinite; } @media (hover: hover) and (pointer: fine) { .pk-dialog { bottom: 40px; } } .pk-editor .ove-sec { margin-top: 14px; } .pk-preview-box { display: grid; place-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #6cc251, #3d9a42); } .pk-preview { width: 96px; height: 138px; image-rendering: pixelated; } .pk-presets { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .pk-preset { display: grid; place-items: center; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--glass-2); cursor: pointer; } .pk-preset canvas { width: 32px; height: 46px; image-rendering: pixelated; } .pk-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .pk-sw { width: 32px; height: 32px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; } .pk-sw.on { border-color: #38bdf8; box-shadow: 0 0 0 2px #0b0b16 inset; } .pk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pk-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; } .pk-color { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); } .pk-color input { width: 100%; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; } @media (max-width: 500px) { .pk-presets { grid-template-columns: repeat(4, 1fr); } } .pk-preset { gap: 2px; } .pk-preset small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; color: var(--muted); } #readonly-bar .btn { flex: none; margin-left: 10px; } /* ------------------------------------------------ sondages de l'accueil (sous les stories) */ /* sondages + discussions défilent ensemble : les sondages ne prennent plus de place fixe au-dessus de la liste */ .side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .side-scroll > .conv-list { flex: none; overflow: visible; } .polls-bar { flex: none; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .polls-bar[hidden] { display: none; } .polls-bar-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .polls-bar-head b { font-size: var(--text-sm); font-weight: 600; } .polls-bar-head .muted { flex: 1; font-size: var(--text-xs); } .polls-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: thin; } /* cartes de l'accueil compactes : réponses sur deux colonnes, plus petites (les discussions restent visibles) */ .home-poll { flex: none; width: min(270px, 78vw); padding: 12px; border: 4px solid var(--shell); border-radius: 24px; background: var(--surface-1) padding-box; box-shadow: 0 0 0 1px var(--border), var(--highlight); scroll-snap-align: start; } .home-poll-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .home-poll-who { font-weight: 600; font-size: var(--text-sm); } .home-poll-head small { flex: 1; color: var(--text-muted); font-size: 11.5px; } .home-poll .poll { width: 100%; grid-template-columns: 1fr 1fr; gap: 5px; } .home-poll .poll-q, .home-poll .poll-foot { grid-column: 1 / -1; } .home-poll .poll-q { font-size: var(--text-sm); } .home-poll .poll-sub, .home-poll .poll-faces { display: none; } .home-poll .poll-opt { min-height: 30px; padding: 5px 8px; gap: 6px; font-size: var(--text-xs); border-radius: var(--radius-sm); border-color: var(--border-strong); background: var(--fill); } .home-poll .poll-check { width: 15px; height: 15px; font-size: 9px; } .home-poll .poll-foot { font-size: 11.5px; } .polls-empty { margin: 0; font-size: var(--text-sm); } .polls-fold { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .polls-fold .muted { font-size: var(--text-xs); } /* ------------------------------------------------ Pokeddy : chat */ .pk-chatlog { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 52px); left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; max-width: min(360px, calc(100% - 20px)); pointer-events: none; } .pk-chatlog { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; } .pk-chatlog.show { opacity: 1; visibility: visible; transition: opacity .2s ease; } .pk-line { align-self: flex-start; padding: 4px 9px; border-radius: 10px; background: rgba(10, 10, 24, .6); color: #fff; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; animation: rise .2s ease; } .pk-line b { color: #7dd3fc; } .pk-line.old { opacity: .55; } .pk-chatbar { position: absolute; left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(10, 10, 24, .88); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } .pk-chatbar[hidden] { display: none; } .pk-chatbar input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; } .pk-chatbar .icon-btn { color: #fff; flex: none; } /* ------------------------------------------------ Pokeddy : combats */ .pk-battle { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #16261a; animation: pk-bin .35s ease; } @keyframes pk-bin { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } .pk-bstage { position: relative; flex: 1; min-height: 0; overflow: hidden; } .pk-bscene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } .pk-hud { position: absolute; z-index: 1; width: min(250px, 52%); padding: 8px 12px 9px; border: 3px solid #2b2b4a; border-radius: 12px; background: #fdfdf7; color: #1d1d2b; font-family: "Monocraft", ui-monospace, monospace; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); } .pk-hud-foe { top: max(12px, env(safe-area-inset-top)); left: 12px; } .pk-hud-me { right: 12px; bottom: 12px; } .pk-hud-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; } .pk-hud-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 0; margin: -8px 0; } /* (le padding laisse la place à l'icône shiny de 24 px : sans lui, la boîte qui coupe les noms trop longs la coupait aussi) */ .pk-lv { flex: none; font-size: 12.5px; font-weight: 700; } .pk-psn { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 5px; background: #8b3fd9; color: #fff; font-style: normal; font-size: .85em; vertical-align: 1px; } /* (empoisonné : Contenaire Temu de Sounike) */ .pk-hp { position: relative; height: 8px; margin-top: 6px; border-radius: 6px; background: #3a3a4a; overflow: hidden; } .pk-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; background: #3ecf6e; transition: width .55s ease, background-color .3s; } .pk-hp i.mid { background: #f5c542; } .pk-hp i.low { background: #ef4444; } .pk-hp-num { display: block; margin-top: 3px; font-size: 12px; text-align: right; } .pk-hp-num:empty { display: none; } .pk-bpanel { flex: none; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); border-top: 3px solid #13132a; background: #232342; } .pk-btext { position: relative; min-height: 70px; padding: 10px 14px 18px; border: 3px solid #2b2b4a; border-radius: 12px; background: #fdfdf7; color: #1d1d2b; font-family: "Monocraft", ui-monospace, monospace; font-size: 15px; line-height: 1.45; cursor: pointer; } .pk-btext p { margin: 0; } .pk-timer { position: absolute; right: 10px; bottom: 4px; font-size: 11.5px; font-weight: 700; color: #6b6b80; } .pk-bactions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .pk-bactions:empty { display: none; } .pk-pxlabel { image-rendering: pixelated; display: block; } .pk-chip-px { display: inline-flex; align-items: center; padding: 1px 8px; } .pk-act { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; border: 3px solid #2b2b4a; border-radius: 12px; background: #fdfdf7; color: #1d1d2b; font: 700 15px system-ui, sans-serif; cursor: pointer; } .pk-act.move { background: #dbeafe; } .pk-act.ball { background: #ede9fe; } .pk-act.run { background: #fee2e2; } .pk-act.primary { grid-column: 1 / -1; background: #38bdf8; color: #fff; } .pk-act:disabled { opacity: .45; cursor: default; } .pk-act:not(:disabled):active { transform: translateY(1px); } @media (min-width: 700px) { .pk-bpanel { padding-left: max(12px, calc(50% - 360px)); padding-right: max(12px, calc(50% - 360px)); } .pk-bactions { grid-template-columns: repeat(4, 1fr); } } /* grand écran (ordinateur, 1080p…) : cadres, textes et boutons du combat grandissent avec les sprites */ @media (min-width: 1100px) and (min-height: 700px) { .pk-hud { width: min(340px, 26%); padding: 12px 18px 14px; border-width: 4px; border-radius: 14px; } .pk-hud-foe { top: 24px; left: 28px; } .pk-hud-me { right: 28px; bottom: 24px; } .pk-hud-top { font-size: 21px; } .pk-lv { font-size: 17px; } .pk-hp { height: 12px; margin-top: 9px; border-radius: 8px; } .pk-hp i { border-radius: 8px; } .pk-hp-num { margin-top: 5px; font-size: 16px; } .pk-balls { gap: 5px; margin-top: 8px; } .pk-ball { width: 17px; height: 17px; } .pk-bpanel { padding: 14px max(12px, calc(50% - 560px)) 18px; } .pk-btext { min-height: 96px; padding: 14px 22px 24px; font-size: 21px; border-width: 4px; } .pk-bactions { gap: 14px; margin-top: 14px; } .pk-act { min-height: 64px; font-size: 19px; border-width: 4px; } .pk-timer { font-size: 14px; } } .pk-flash { position: absolute; inset: 0; z-index: 7; background: #fff; pointer-events: none; animation: pk-flash .64s steps(1) forwards; } @keyframes pk-flash { 0%, 34%, 68% { opacity: 1; } 17%, 51%, 85%, 100% { opacity: 0; } } .pk-dialog-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-family: system-ui, sans-serif; } .pk-dialog-btns .btn:not(.primary) { border-color: #c9c9d6; background: #efeff5; color: #1d1d2b; } .pk-challenges { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 52px); left: 50%; z-index: 8; display: grid; gap: 8px; width: min(420px, calc(100% - 24px)); transform: translateX(-50%); } .pk-challenge { padding: 12px 14px; border: 3px solid #2b2b4a; border-radius: 14px; background: #fdfdf7; color: #1d1d2b; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: rise .2s ease; } .pk-challenge p { margin: 0 0 4px; font-size: 15px; } .pk-challenge small { color: #55556a; } .pk-challenge-bar { height: 4px; margin-top: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; } .pk-challenge-bar i { display: block; height: 100%; background: #f97316; animation: pk-countdown linear forwards; } @keyframes pk-countdown { from { width: 100%; } to { width: 0; } } .pk-record { margin: 0 0 10px; } .pk-dexicon { width: 24px; height: 24px; image-rendering: pixelated; display: block; } .pk-icon { width: 24px; height: 24px; image-rendering: pixelated; display: inline-block; vertical-align: middle; } .pk-icon.sm { margin: -7px 0; } /* (dans une ligne de texte : l'icône ne fait pas grandir la ligne) */ .pk-dexbtn, .pk-iconbtn { display: inline-flex; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; } .pk-dex-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; } .pk-dex-head .pk-dexicon { width: 36px; height: 36px; } .pk-dex-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; font-size: 11px; color: var(--muted, #aab); } .pk-dex-stats .bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; } .pk-dex-stats .bar i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #a78bfa); } .pk-dex-moves { display: flex; flex-wrap: wrap; gap: 4px; } .pk-dex-unknown { opacity: .75; } .pk-team { display: grid; gap: 8px; } .pk-team-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--glass-2); } .pk-team-sprite { flex: none; width: 64px; height: 58px; image-rendering: pixelated; } .pk-team-info { flex: 1; min-width: 0; display: grid; gap: 4px; } .pk-team-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } .pk-team-name b { min-width: 0; overflow-wrap: anywhere; } .pk-team-name .pk-chip { background: rgba(56, 189, 248, .18); color: #7dd3fc; font-size: 11px; } .pk-team-name .pk-chip.pk-shiny { background: rgba(250, 204, 21, .2); color: #fde047; display: inline-flex; align-items: center; align-self: center; gap: 2px; padding: 0 10px 0 3px; } /* (la pastille est aussi haute que l'icône shiny de 24 px : avant, l'icône dépassait sous son fond) */ .pk-chip .pk-icon.sm { margin: 0; } .pk-team-sprite.shiny { animation: pk-shiny 1.3s ease-in-out infinite alternate; } @keyframes pk-shiny { from { filter: drop-shadow(0 0 0 rgba(255, 236, 150, 0)) brightness(1); } to { filter: drop-shadow(0 0 6px rgba(255, 236, 150, .95)) brightness(1.18); } } @media (prefers-reduced-motion: reduce) { .pk-team-sprite.shiny { animation: none; filter: drop-shadow(0 0 4px rgba(255, 236, 150, .9)); } } .pk-team-info .pk-hp { margin-top: 0; } .pk-xp { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; } .pk-xp i { display: block; height: 100%; background: #38bdf8; } .pk-team-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 40%; } .pk-rename { display: flex; gap: 6px; min-width: 0; } .pk-duel-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--glass-2); } .pk-duel-sprite { flex: none; width: 32px; height: 46px; image-rendering: pixelated; } .pk-duel-info { flex: 1; min-width: 0; display: grid; gap: 2px; } .pk-duel-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-rename input { min-width: 0; width: 100%; height: 34px; padding: 0 10px; border-radius: 10px; } /* Eddyball restantes sous les noms (combats de dresseur) */ .pk-balls { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; } .pk-balls:empty { display: none; } .pk-ball { box-sizing: border-box; width: 12px; height: 12px; border: 2px solid #2b2b4a; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9d5ff 0, #8b5cf6 55%, #4c1d95 100%); } .pk-ball.off { background: #d4d4de; border-color: #9a9aa8; } /* Centre Pokeddy : fondu au noir quand on passe une porte, éclat rose quand l'infirmière soigne */ .pk-fade { position: absolute; inset: 0; z-index: 9; background: #0b0814; pointer-events: none; animation: pk-fade .5s ease-out forwards; } @keyframes pk-fade { 0% { opacity: 1; } 35% { opacity: 1; } 100% { opacity: 0; } } .pk-flash.heal { background: rgba(255, 182, 213, .75); animation: pk-heal .7s ease-out forwards; } @keyframes pk-heal { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } } /* ---- Pokeddy Battlefields : survie en temps réel (dessiné dans un canvas ; ici l'habillage : boutons, fenêtres, classement) */ .bf-game { position: fixed; inset: 0; z-index: 29; overflow: hidden; background: #14301d; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-family: "Monocraft", ui-monospace, monospace; color: #fff; } .bw-game { position: fixed; inset: 0; z-index: 29; overflow: hidden; background: #12102e; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .bw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; } .bf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; } .bf-pause { position: absolute; top: max(16px, calc(env(safe-area-inset-top) + 10px)); right: 12px; z-index: 2; padding: 5px 9px; border: 3px solid #0b1a10; background: #ffe066; box-shadow: 0 3px 0 #0b1a10; cursor: pointer; } .bf-pause:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b1a10; } .bf-super { position: absolute; right: 14px; bottom: max(26%, 110px); z-index: 2; width: 84px; height: 84px; display: grid; place-items: center; overflow: hidden; border: 4px solid #0b1a10; border-radius: 16px; background: #34364a; cursor: pointer; box-shadow: 0 4px 0 #0b1a10; } .bf-super i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #2f9e57; } .bf-super canvas { position: relative; z-index: 1; } .bf-super.ready { animation: bf-pulse .7s ease-in-out infinite; border-color: #e7ffc5; } .bf-super.ready i { background: #7eff4a; } .bf-super:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b1a10; } @keyframes bf-pulse { 50% { transform: scale(1.1); } } .bf-modal { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 14px; overflow-y: auto; background: rgba(5, 15, 8, .74); } .bf-modal[hidden] { display: none; } .bf-panel { width: min(600px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 14px; border: 4px solid #0b1a10; background: #1b3a2a; box-shadow: 0 0 0 4px #4ade80, 0 14px 40px rgba(0, 0, 0, .55); text-align: center; animation: rise .15s ease; } .bf-panel p { margin: 0; } .bf-sub { color: #c1f183; font-size: 14px; } .bf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; } .bf-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 3px solid #0b1a10; background: #24493a; color: #fff; font: inherit; cursor: pointer; } .bf-card:hover, .bf-card:focus-visible { background: #2f6a4a; outline: 3px solid #ffe066; } .bf-card p { font-size: 13px; line-height: 1.4; color: #e7ffc5; } .bf-card small { font-size: 12px; color: #ffe066; } .bf-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 14px; color: #e7ffc5; } .bf-top { width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; font-size: 13px; } .bf-top li { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; } .bf-top li b { flex: none; width: 28px; color: #c1f183; } .bf-top li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bf-top li em { flex: none; font-style: normal; color: #ffe066; } .bf-top li.me { background: #2f6a4a; } .bf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .bf-btn { padding: 8px 14px; border: 3px solid #0b1a10; background: #3a3a5a; font: inherit; cursor: pointer; box-shadow: 0 4px 0 #0b1a10; } .bf-btn.primary { background: #7eff4a; } .bf-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b1a10; } @media (max-width: 640px) { .bf-cards { grid-template-columns: 1fr; } .bf-card { flex-direction: row; text-align: left; } .bf-card canvas { flex: none; } } /* ------------------------------------------------ indicateurs : visibles sans clignoter en permanence */ .avatar.is-live { animation: none; box-shadow: 0 0 0 2px #0b0b0d, 0 0 0 4px var(--live); } .story-ring.plan-glow { animation: none; box-shadow: none; } .streak { border-radius: var(--radius-full); font-weight: 600; } .streak.warn { animation: none; } .live-tag { border-radius: var(--radius-full); padding: 2px 7px; font-weight: 700; } .live-new-ico { text-shadow: none; } .pk-card { border-color: rgba(76, 175, 80, .22) !important; background: linear-gradient(135deg, rgba(76, 175, 80, .12), rgba(56, 189, 248, .06)) padding-box !important; } .history-btn, .wall-btn { width: 100%; } /* ------------------------------------------------ 6. adaptations */ /* grand écran : texte du bouton « Nouvelle discussion », profil complet, panneau d'infos en colonne */ @media (min-width: 1280px) { .btn-label { display: inline; } .topbar .me-text { display: flex; } .me { padding-right: 12px; } .shell:has(> .panel:not([hidden])) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w); } .shell > .panel { position: relative; inset: auto; z-index: 1; width: auto; background-color: var(--bg-subtle); box-shadow: 0 0 0 1px var(--border), var(--highlight); } } /* onglets d'administration (Groupes, Privées, Pardons) : en icônes tant que la barre n'a pas la place de tout écrire */ @media (min-width: 1024px) and (max-width: 1599px) { .side-tabs .admin-tab { gap: 0; padding: 0 12px; font-size: 0; } .side-tabs .admin-tab .tab-count { margin-left: 4px; font-size: 10.5px; } } @media (min-width: 1024px) and (max-width: 1279px) { :root { --sidebar-w: 330px; } .side-tabs button { padding: 0 12px; } } /* tablette et téléphone : la navigation passe dans un menu plein écran (bouton à deux traits qui devient une croix) */ @media (max-width: 1023px) { .topbar { width: 100%; } .topbar-inner { gap: 4px; padding: 0 6px 0 12px; } .topbar .brand { flex: 1; min-width: 0; } .side-actions { margin-left: 0; } .nav-toggle { position: relative; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; margin-left: 2px; border: 0; border-radius: 50%; background: var(--fill-strong); color: var(--text); cursor: pointer; } .nav-toggle i { position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur-slow) var(--ease); } .nav-toggle i:first-child { transform: translateY(-3.5px); } .nav-toggle i:last-child { transform: translateY(3.5px); } .layout.nav-open .nav-toggle i:first-child { transform: rotate(45deg); } .layout.nav-open .nav-toggle i:last-child { transform: rotate(-45deg); } .topbar-inner > :not(.side-tabs) { position: relative; z-index: 2; } .side-tabs { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: calc(env(safe-area-inset-top) + 104px) 24px calc(env(safe-area-inset-bottom) + 40px); overflow-y: auto; background: rgba(5, 5, 5, .84); -webkit-backdrop-filter: blur(40px) saturate(140%); backdrop-filter: blur(40px) saturate(140%); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); } .layout.nav-open .side-tabs { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity var(--dur-slow) var(--ease); } .side-tabs button { height: auto; padding: 14px 16px; gap: 18px; border-radius: 24px; justify-content: flex-start; font-size: clamp(26px, 7vw, 34px); font-weight: 500; letter-spacing: -.035em; color: var(--text-muted); } .side-tabs button::before { width: 26px; height: 26px; } .side-tabs button[aria-selected="true"] { color: var(--text); } .side-tabs [data-tab="groups"] { margin: 18px 0 0; } .side-tabs .tab-count { min-width: 26px; height: 26px; font-size: 13px; } } @media (min-width: 761px) and (max-width: 1023px) { :root { --sidebar-w: 300px; --gap: 12px; } .layout { padding: 12px; } .messages { padding-inline: 20px; } .composer-wrap { width: calc(100% - 28px); margin-bottom: 14px; } } /* téléphone : une colonne ; la discussion ouverte prend tout l'écran */ @media (max-width: 760px) { html.kb .layout, html.kb .panel, html.kb .history, html.kb .reel-viewer { inset: auto 0; top: var(--vv-top, 0px); height: var(--vv-height, 100dvh); } input, textarea, select, .composer textarea, .search input, .auth-form input { font-size: 16px; } /* sinon iOS zoome tout seul */ .layout { padding: calc(env(safe-area-inset-top) + 10px) 10px 0; gap: 10px; } .topbar-inner { height: 54px; } .shell { grid-template-columns: minmax(0, 1fr); } .sidebar { border-width: 4px; border-radius: 26px 26px 0 0; border-bottom: 0; } .layout.in-chat { padding: 0; gap: 0; } .layout.in-chat .topbar, .layout.in-chat .sidebar { display: none; } .layout:not(.in-chat) .chat { display: none; } .chat { border: 0; border-radius: 0; background: #070708; box-shadow: none; } .search { padding: 12px 12px 8px; } .search svg { left: 28px; } .conv-list { padding: 4px 6px 12px; } .chat-head { min-height: 60px; height: auto; padding: env(safe-area-inset-top) 6px 0 2px; } .chat-head .back { display: grid; } .chat-title { gap: 10px; } .messages { padding: 14px 12px 8px; } .bubble { max-width: 84%; } .msg-menu-btn { display: none; } .composer-wrap { width: auto; margin: 0 8px max(8px, env(safe-area-inset-bottom)); border-width: 4px; border-radius: 28px; box-shadow: 0 0 0 1px var(--border), var(--highlight); } .panel { position: fixed; inset: 0; width: 100%; border: 0; border-radius: 0; background-color: #070708; box-shadow: none; } .panel-head { min-height: 60px; height: auto; padding-top: env(safe-area-inset-top); } .to-bottom { right: 14px; } /* navigation : pastille flottante en bas de l'écran (comme la barre d'onglets d'iOS) ; masquée dans une discussion ouverte (la barre du haut, qui la contient, l'est aussi) et quand le clavier est ouvert */ .nav-toggle { display: none; } .side-tabs { position: fixed; top: auto; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 1; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 5px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 2px; overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-full); background: rgba(24, 24, 28, .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 0 0 1px var(--border-strong), var(--highlight), 0 24px 60px -18px rgba(0, 0, 0, .95); visibility: visible; opacity: 1; pointer-events: auto; transition: none; } .side-tabs button { position: relative; flex: none; flex-direction: column; justify-content: center; gap: 3px; height: 54px; min-width: 62px; padding: 0 9px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .side-tabs button:active { transform: scale(.94); } .side-tabs button::before { width: 22px; height: 22px; } .side-tabs button[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px var(--border), var(--highlight); } .side-tabs [data-tab="groups"] { margin: 0 0 0 4px; } .side-tabs .tab-count { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px #18181c; } /* compte admin (8 onglets) : icônes seules, pour que tout tienne dans la pastille */ .side-tabs:has(.admin-tab:not([hidden])) button { min-width: 40px; padding: 0 8px; gap: 0; font-size: 0; } .side-tabs:has(.admin-tab:not([hidden])) .tab-count { font-size: 10px; } html.kb .side-tabs { visibility: hidden; } /* la liste défile jusqu'au-dessus de la pastille */ .side-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); } .layout:not(.in-chat):not([hidden]) ~ .toast { bottom: calc(env(safe-area-inset-bottom) + 84px); } .history { inset: 0; border: 0; border-radius: 0; } .history-head { padding-top: env(safe-area-inset-top); } .history-bar { padding-bottom: max(14px, env(safe-area-inset-bottom)); } /* fenêtres : feuille qui monte du bas, coque arrondie seulement en haut */ .modal-back { padding: 0; align-items: end; } /* (fond flouté comme sur ordinateur : le contour de la feuille ne laisse plus voir net derrière) */ .modal { max-width: none; max-height: 92%; border-width: 6px 6px 0; border-radius: 34px 34px 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: sheet-in; } .modal.wide { max-width: none; } .modal-head { min-height: 60px; padding-left: 22px; } .modal-body { padding: 4px 22px 22px; } .modal-foot { padding: 12px 16px 16px 22px; } .badge-colors { grid-template-columns: repeat(5, 1fr); } .badge-mixes { grid-template-columns: repeat(3, 1fr); } .bubble.voice { min-width: 210px; } .reel-viewer { inset: 0; } .rc-sheet { max-height: 70%; } .toast { bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); } .auth-wrap { padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); } .auth-card { padding: 30px 20px 22px; border-width: 6px; border-radius: 34px; } .auth h1 { font-size: var(--text-2xl); } } @keyframes sheet-in { from { transform: translateY(60px); opacity: 0; } } @media (max-width: 440px) { .topbar-inner:has(.inbox-pop:not([hidden])) .brand-text { display: none; } } /* ------------------------------------------------ écrans tactiles */ @media (pointer: coarse) { * { -webkit-tap-highlight-color: transparent; } .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .icon-btn { width: 42px; height: 42px; } .icon-btn.small { width: 36px; height: 36px; } .icon-btn.accent { width: auto; min-width: 42px; } } /* « Nouvelle discussion » sans son texte (sous 1280 px) : simple rond blanc à icône centrée, de la taille des autres boutons de la barre (la pastille intérieure n'a de sens qu'à côté du texte) */ @media (max-width: 1279px) { .side-actions .icon-btn.accent { width: 38px; min-width: 0; padding: 0; justify-content: center; } .side-actions .icon-btn.accent .btn-orb { width: auto; height: auto; background: none; } } @media (max-width: 1279px) and (pointer: coarse) { .side-actions .icon-btn.accent { width: 42px; } } /* ------------------------------------------------ téléphones : allégé pour rester fluide (pas de flou sur ce qui défile) */ @media (max-width: 760px), (pointer: coarse) { .msg .bubble.skinned, .avatar.lg { box-shadow: none !important; } .capy-bg { filter: var(--sk-filter, none); } .msg.first .bubble.skin-deco::after { filter: var(--sk-filter, none) !important; } .sticker-img, .tick.read { filter: none; } .tbadge::before { filter: blur(4px); } } /* anciens iPhone (iOS < 16.2) : pas de color-mix() */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --accent-hover: var(--c1); --accent-text: #c4b5fd; --accent-soft: rgba(139, 92, 246, .14); --accent-border: rgba(139, 92, 246, .4); --ring: #c4b5fd; } body::before { background: radial-gradient(42vmax 42vmax at 6% -12%, rgba(139, 92, 246, .16), transparent 70%), radial-gradient(38vmax 38vmax at 104% 108%, rgba(34, 211, 238, .11), transparent 70%); } input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(139, 92, 246, .18); } .tick.read { color: #a5f3fc; } .btn.danger { border-color: rgba(244, 63, 94, .3); background: rgba(244, 63, 94, .09); } .tbadge { --bc-light: #fff; } .tbadge > span { color: #fff; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------ sélecteur de thème : une carte par thème, avec un aperçu miniature (les aperçus ont leurs propres couleurs : ils montrent chaque thème quel que soit celui qui est affiché) */ .theme-lead { margin: 0 0 16px; font-size: var(--text-sm); line-height: 1.55; } .theme-list { display: grid; gap: 10px; } .theme-card { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--fill); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-card:active { transform: scale(.99); } .theme-card[aria-checked="true"] { border-color: var(--text); background: var(--fill-strong); } .theme-text { min-width: 0; display: grid; gap: 3px; } .theme-text b { font-size: var(--text-md); font-weight: 600; } .theme-text small { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.4; } .theme-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: transparent; } .theme-check svg { width: 15px; height: 15px; stroke-width: 2.5; } .theme-card[aria-checked="true"] .theme-check { border-color: transparent; background: var(--text); color: var(--bg); } @media (hover: hover) { .theme-card:hover { border-color: var(--text-faint); } } @media (max-width: 480px) { .theme-card { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; } } /* aperçus : 132 × 84 px */ .tp { position: relative; display: flex; flex-direction: column; gap: 4px; aspect-ratio: 132 / 84; padding: 5px; overflow: hidden; border-radius: 12px; } .tp i { display: block; flex: none; } .tp-bar { display: flex; align-items: center; gap: 3px; height: 10px; padding: 0 4px; } .tp-dot { width: 6px; height: 6px; border-radius: 2px; background: linear-gradient(135deg, #8b5cf6, #22d3ee); } .tp-tab { width: 14px; height: 4px; border-radius: 2px; } .tp-body { flex: 1; display: flex; gap: 4px; min-height: 0; } .tp-side { width: 36%; display: flex; flex-direction: column; gap: 3px; padding: 4px; } .tp-row { height: 7px; border-radius: 3px; } .tp-chat { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 4px; } .tp-msg { width: 62%; height: 7px; border-radius: 4px; } .tp-msg.out { align-self: flex-end; } .tp-msg.short { width: 38%; } .tp-input { margin-top: auto; height: 8px; border-radius: 5px; } /* Ethereal Glass */ .tp-glass { background: radial-gradient(80% 90% at 0% 0%, rgba(139, 92, 246, .35), transparent 60%), #050505; } .tp-glass .tp-bar { align-self: center; width: 70%; border-radius: 6px; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); } .tp-glass .tp-tab { background: rgba(255, 255, 255, .25); } .tp-glass .tp-tab.on { background: #fff; } .tp-glass .tp-side, .tp-glass .tp-chat { border-radius: 6px; background: rgba(12, 12, 14, .9); box-shadow: 0 0 0 2px rgba(255, 255, 255, .05), 0 0 0 3px rgba(255, 255, 255, .07); } .tp-glass .tp-row { background: rgba(255, 255, 255, .08); } .tp-glass .tp-row.on { background: rgba(255, 255, 255, .2); } .tp-glass .tp-msg.in { background: rgba(255, 255, 255, .14); } .tp-glass .tp-msg.out { background: linear-gradient(90deg, #8b5cf6, #22d3ee); } .tp-glass .tp-input { border-radius: 6px; background: rgba(255, 255, 255, .1); } /* Windows 95 */ .tp-win95 { flex-direction: column-reverse; padding: 0; gap: 0; border-radius: 4px; background: #008080; } .tp-win95 .tp-bar { height: 11px; padding: 0 3px; border-radius: 0; background: #c0c0c0; box-shadow: inset 0 1px #fff; } .tp-win95 .tp-dot { width: 14px; height: 7px; border-radius: 0; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; } .tp-win95 .tp-tab { width: 16px; height: 7px; border-radius: 0; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; } .tp-win95 .tp-tab.on { background: #dfdfdf; box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; } .tp-win95 .tp-body { padding: 4px; } .tp-win95 .tp-side, .tp-win95 .tp-chat { padding: 9px 3px 3px; border-radius: 0; background: linear-gradient(#000080 0 6px, #c0c0c0 6px); box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf; } .tp-win95 .tp-row { border-radius: 0; background: #fff; } .tp-win95 .tp-row.on { background: #000080; } .tp-win95 .tp-msg { border-radius: 0; } .tp-win95 .tp-msg.in { background: #ffffe1; box-shadow: 0 0 0 1px #000; } .tp-win95 .tp-msg.out { background: #000080; } .tp-win95 .tp-input { border-radius: 0; background: #fff; box-shadow: inset 1px 1px #808080; } /* Apple */ .tp-apple { background: #f2f2f7; } .tp-apple .tp-bar { border-radius: 5px; background: rgba(255, 255, 255, .9); } .tp-apple .tp-dot { border-radius: 50%; } .tp-apple .tp-tab { background: rgba(118, 118, 128, .2); } .tp-apple .tp-tab.on { background: #007aff; } .tp-apple .tp-side, .tp-apple .tp-chat { border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } .tp-apple .tp-row { background: #f2f2f7; } .tp-apple .tp-row.on { background: #007aff; } .tp-apple .tp-msg { border-radius: 5px; } .tp-apple .tp-msg.in { background: #e9e9eb; } .tp-apple .tp-msg.out { background: #007aff; } .tp-apple .tp-input { border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(60, 60, 67, .2); } /* horloge de la barre des tâches : seulement dans le thème Windows 95 */ .tray-clock { display: none; } /* ============================================================================================ Thème « Windows 95 » (html[data-ui="win95"]) — d'après Windows 95 et les valeurs de 98.css (MIT) : gris #c0c0c0, bureau sarcelle #008080, barres de titre bleu marine #000080, reliefs de 2 px (blanc / #dfdfdf en haut à gauche, #808080 / #0a0a0a en bas à droite), aucun arrondi, aucune ombre, aucune animation. La liste, la discussion, le panneau et les fenêtres deviennent des fenêtres ; la navigation devient la barre des tâches (bouton Démarrer = logo, onglets = boutons de tâches, horloge). ============================================================================================ */ :root[data-ui="win95"] { color-scheme: light; --bg: #008080; --bg-subtle: #c0c0c0; --surface-1: #c0c0c0; --surface-2: #c0c0c0; --surface-3: #b5b5b5; --fill: #c0c0c0; --fill-strong: #b5b5b5; --border: #808080; --border-strong: #808080; --shell: transparent; --highlight: inset 0 0 0 0 transparent; --text: #000; --text-muted: #303030; --text-faint: #444; --accent: #000080; --accent-hover: #000080; --accent-text: #000080; --accent-soft: rgba(0, 0, 128, .1); --accent-border: #000080; --ring: #000; --cta: #c0c0c0; --cta-hover: #c0c0c0; --on-cta: #000; --danger: #c00000; --danger-text: #a00000; --ok: #008000; --bubble-in: #ffffe1; --font: "Microsoft Sans Serif", "MS Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif; --text-xs: 11px; --text-sm: 12px; --text-base: 12px; --text-md: 13px; --text-lg: 15px; --text-xl: 17px; --text-2xl: 22px; --text-3xl: 28px; --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --radius-full: 0; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; /* reliefs (98.css) : bouton, bouton enfoncé, champ creusé, fenêtre, zone d'état */ --w-out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --w-in: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; --w-field: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; --w-window: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; --w-dither: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; /* noms dans les groupes, lettres de classe : teintes foncées de la palette 256 couleurs (lisibles sur gris, blanc et jaune) */ --nc0: #004b4b; --nc1: #6b006b; --nc2: #005000; --nc3: #6b3a00; --nc4: #3a2a7a; --nc5: #00466b; --nc6: #800000; --nc7: #000080; --nc8: #703800; --nc9: #4b4b00; --lc0: #800000; --lc1: #800080; --lc2: #004b4b; --lc3: #703800; --lc4: #4b4b00; --lc5: #000080; --lc6: #6b006b; --lc7: #5a4a00; --lc8: #00466b; --lc9: #6b0035; } :root[data-ui="win95"] .lvl-6 { color: #005000; } :root[data-ui="win95"] .lvl-5 { color: #00466b; } :root[data-ui="win95"] .lvl-4 { color: #6b3a00; } :root[data-ui="win95"] .lvl-3 { color: #6b0035; } :root[data-ui="win95"] .lvl-2 { color: #004b4b; } :root[data-ui="win95"] .lvl-1 { color: #6b006b; } :root[data-ui="win95"] .lvl-t { color: #5a4a00; } :root[data-ui="win95"] body { --on-accent: #fff; font-size: 12px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto; letter-spacing: 0; } :root[data-ui="win95"] body::before { display: none; } :root[data-ui="win95"] h1, :root[data-ui="win95"] h2, :root[data-ui="win95"] h3 { letter-spacing: 0; } :root[data-ui="win95"] ::selection { background: #000080; color: #fff; } :root[data-ui="win95"] svg.lc { stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; } :root[data-ui="win95"] :focus-visible { outline: 1px dotted #000; outline-offset: -4px; } :root[data-ui="win95"] .muted { color: #303030; } /* barres de défilement grises, rainure tramée, flèches */ :root[data-ui="win95"] * { scrollbar-width: auto; scrollbar-color: auto; } :root[data-ui="win95"] ::-webkit-scrollbar { width: 16px; height: 16px; } :root[data-ui="win95"] ::-webkit-scrollbar-track { background: var(--w-dither); } :root[data-ui="win95"] ::-webkit-scrollbar-thumb { border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-out); } :root[data-ui="win95"] ::-webkit-scrollbar-corner { background: #c0c0c0; } :root[data-ui="win95"] ::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background: #c0c0c0 no-repeat center / 9px 8px; box-shadow: var(--w-out); } :root[data-ui="win95"] ::-webkit-scrollbar-button:single-button:active { box-shadow: var(--w-in); } :root[data-ui="win95"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M4 2h1v1H4zM3 3h3v1H3zM2 4h5v1H2zM1 5h7v1H1z'/%3E%3C/svg%3E"); } :root[data-ui="win95"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h7v1H1zM2 3h5v1H2zM3 4h3v1H3zM4 5h1v1H4z'/%3E%3C/svg%3E"); } :root[data-ui="win95"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M2 4h1v1H2zM3 3h1v3H3zM4 2h1v5H4zM5 1h1v7H5z'/%3E%3C/svg%3E"); } :root[data-ui="win95"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M6 4h1v1H6zM5 3h1v3H5zM4 2h1v5H4zM3 1h1v7H3z'/%3E%3C/svg%3E"); } @supports (-moz-appearance: none) { :root[data-ui="win95"] * { scrollbar-color: #c0c0c0 #e4e4e4; } } /* boutons : relief, enfoncés au clic ; le bouton par défaut a un cadre noir ; texte grisé en relief quand désactivé */ :root[data-ui="win95"] .btn { min-height: 26px; padding: 4px 14px; border: 0; border-radius: 0; background: #c0c0c0; color: #000; font-size: 12px; font-weight: 400; letter-spacing: 0; box-shadow: var(--w-out); transform: none; } :root[data-ui="win95"] .btn.primary { background: #c0c0c0; color: #000; box-shadow: 0 0 0 1px #000, var(--w-out); } :root[data-ui="win95"] .btn.danger { background: #c0c0c0; color: #800000; } :root[data-ui="win95"] .btn.ghost { background: #c0c0c0; box-shadow: var(--w-out); } :root[data-ui="win95"] .btn:active:not(:disabled), :root[data-ui="win95"] .btn.primary:active:not(:disabled) { transform: none; padding: 5px 13px 3px 15px; box-shadow: var(--w-in); } :root[data-ui="win95"] .btn:disabled { opacity: 1; color: #808080; text-shadow: 1px 1px #fff; } :root[data-ui="win95"] .btn:hover:not(:disabled), :root[data-ui="win95"] .btn.primary:hover:not(:disabled), :root[data-ui="win95"] .btn.danger:hover:not(:disabled), :root[data-ui="win95"] .btn.ghost:hover:not(:disabled) { background: #c0c0c0; } :root[data-ui="win95"] .btn.small { min-height: 22px; padding: 2px 10px; font-size: 12px; } :root[data-ui="win95"] .btn .btn-orb, :root[data-ui="win95"] .bento-card .btn-orb { display: none; } :root[data-ui="win95"] .auth-form .btn.primary { justify-content: center; } :root[data-ui="win95"] .icon-btn { width: 26px; height: 24px; border-radius: 0; background: none; color: #000; transform: none; } :root[data-ui="win95"] .icon-btn svg { width: 16px; height: 16px; } :root[data-ui="win95"] .icon-btn:hover { background: none; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .icon-btn:active { background: none; transform: none; box-shadow: var(--w-in); } :root[data-ui="win95"] .icon-btn .dot { top: 3px; right: 3px; border-radius: 0; box-shadow: none; background: #f00; } :root[data-ui="win95"] .icon-btn.accent, :root[data-ui="win95"] .icon-btn.accent:hover { width: 26px; min-width: 0; padding: 0; justify-content: center; background: none; color: #000; } :root[data-ui="win95"] .icon-btn.accent .btn-orb { width: auto; height: auto; margin: 0; background: none; } :root[data-ui="win95"] .btn-label { display: none !important; } :root[data-ui="win95"] .link-btn { color: #0000ff; text-decoration-color: currentColor; font-weight: 400; } /* champs : creusés, fond blanc */ :root[data-ui="win95"] input, :root[data-ui="win95"] textarea, :root[data-ui="win95"] select { border: 0; border-radius: 0; background-color: #fff; color: #000; box-shadow: var(--w-field); } :root[data-ui="win95"] input:hover:not(:focus):not(:disabled), :root[data-ui="win95"] textarea:hover:not(:focus):not(:disabled), :root[data-ui="win95"] select:hover { border: 0; } :root[data-ui="win95"] input:focus, :root[data-ui="win95"] textarea:focus, :root[data-ui="win95"] select:focus { border: 0; background-color: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] input::placeholder, :root[data-ui="win95"] textarea::placeholder { color: #808080; } :root[data-ui="win95"] input[type="checkbox"], :root[data-ui="win95"] input[type="radio"], :root[data-ui="win95"] input[type="range"] { box-shadow: none; } :root[data-ui="win95"] select { height: 26px; padding: 0 24px 0 6px; font-size: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' shape-rendering='crispEdges'%3E%3Crect width='16' height='20' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h16v1H1v19H0z' fill='%23fff'/%3E%3Cpath d='M15 0h1v20H0v-1h15z' fill='%230a0a0a'/%3E%3Cpath d='M1 1h14v1H2v17H1z' fill='%23dfdfdf'/%3E%3Cpath d='M14 1h1v18H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M4 8h7v1H4zM5 9h5v1H5zM6 10h3v1H6zM7 11h1v1H7z'/%3E%3C/svg%3E") no-repeat right 2px center; } :root[data-ui="win95"] .auth-form input, :root[data-ui="win95"] .suggest-form input { height: 26px; padding: 0 6px; font-size: 13px; } :root[data-ui="win95"] .auth-form label, :root[data-ui="win95"] .school-row label, :root[data-ui="win95"] .suggest-form label { color: #000; font-weight: 400; font-size: 12px; gap: 4px; } /* onglets segmentés : boutons, l'onglet ouvert enfoncé et tramé */ :root[data-ui="win95"] .tabs, :root[data-ui="win95"] .seg, :root[data-ui="win95"] .admin-tabs { gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } :root[data-ui="win95"] .tabs button, :root[data-ui="win95"] .seg button, :root[data-ui="win95"] .admin-tabs button, :root[data-ui="win95"] .gv-tab { height: 26px; border: 0; border-radius: 0; background: #c0c0c0; color: #000; font-size: 12px; font-weight: 400; box-shadow: var(--w-out); } :root[data-ui="win95"] .tabs button[aria-selected="true"], :root[data-ui="win95"] .seg button[aria-pressed="true"], :root[data-ui="win95"] .admin-tabs button[aria-selected="true"], :root[data-ui="win95"] .gv-tab[aria-pressed="true"] { background: var(--w-dither); color: #000; font-weight: 700; box-shadow: var(--w-in); } :root[data-ui="win95"] .tabs button:hover, :root[data-ui="win95"] .seg button:hover, :root[data-ui="win95"] .admin-tabs button:hover, :root[data-ui="win95"] .gv-tab:hover { color: #000; } /* étiquettes, pastilles, logo */ :root[data-ui="win95"] .eyebrow { height: auto; padding: 0; border: 0; background: none; color: #000; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; } :root[data-ui="win95"] .eyebrow::before { display: none; } :root[data-ui="win95"] .tag { height: 18px; border: 1px solid #000; border-radius: 0; background: #fff; color: #000; font-weight: 400; letter-spacing: 0; } :root[data-ui="win95"] .badge, :root[data-ui="win95"] .tab-count, :root[data-ui="win95"] .to-bottom span { border-radius: 0; background: #000080; color: #fff; font-weight: 700; box-shadow: none; } :root[data-ui="win95"] .count-pill, :root[data-ui="win95"] .menu .count, :root[data-ui="win95"] .inbox-count, :root[data-ui="win95"] .admin-row .chat-btn b { border-radius: 0; background: #f00; color: #fff; box-shadow: none; } :root[data-ui="win95"] .logo { border-radius: 0; box-shadow: none; } :root[data-ui="win95"] .brand-text { font-size: 13px; font-weight: 700; letter-spacing: 0; } /* chargement : barre de progression à blocs */ :root[data-ui="win95"] .loader { background: #008080; } :root[data-ui="win95"] .loader .logo.big { width: 48px; height: 48px; } :root[data-ui="win95"] .loader-bar { width: 200px; height: 20px; border-radius: 0; background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .loader-bar::after { top: 4px; bottom: 4px; left: 4px; width: 40%; border-radius: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); animation: loader-slide 1.6s steps(8) infinite; } /* titre de fenêtre (bleu marine, gris quand la fenêtre n'est pas active) */ :root[data-ui="win95"] .sidebar::before, :root[data-ui="win95"] .chat:has(> .chat-head[hidden])::before, :root[data-ui="win95"] .auth-card::before, :root[data-ui="win95"] .auth-aside::before { content: "Insteddy"; display: flex; align-items: center; flex: none; height: 20px; padding: 0 4px; background: #000080; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-ui="win95"] .sidebar::before { content: "Insteddy - Discussions"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="channels"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Chaînes"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="reels"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Reels"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="lives"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Lives"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="games"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Jeux"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="groups"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Groupes"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="dms"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Privées"; } :root[data-ui="win95"] .layout:has(#side-tabs [data-tab="appeals"][aria-selected="true"]) .sidebar::before { content: "Insteddy - Pardons"; } :root[data-ui="win95"] .auth-card::before { content: "Connexion à Insteddy"; } :root[data-ui="win95"] .auth-aside::before { content: "Bienvenue dans Insteddy"; } :root[data-ui="win95"] .sidebar:not(:focus-within)::before { background: #808080; color: #c0c0c0; } :root[data-ui="win95"] .layout:has(.sidebar:focus-within) .chat-head { background: #808080; color: #c0c0c0; } /* une boîte de dialogue ouverte est la seule fenêtre active */ :root[data-ui="win95"] body:has(#modal:not([hidden])) .sidebar::before, :root[data-ui="win95"] body:has(#modal:not([hidden])) .chat::before, :root[data-ui="win95"] body:has(#modal:not([hidden])) .chat-head, :root[data-ui="win95"] body:has(#modal:not([hidden])) .panel-head { background: #808080; color: #c0c0c0; } /* ------------------------------------------------ disposition : fenêtres sur le bureau, barre des tâches en bas */ :root[data-ui="win95"] .layout { grid-template-rows: minmax(0, 1fr) auto; padding: 8px 8px 0; gap: 8px; } :root[data-ui="win95"] .shell { grid-row: 1; gap: 8px; max-width: none; } :root[data-ui="win95"] .topbar { grid-row: 2; justify-self: stretch; width: auto; max-width: none; margin: 0 -8px; border-radius: 0; } :root[data-ui="win95"] .topbar::before { border-radius: 0; background: #c0c0c0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; } :root[data-ui="win95"] .topbar-inner { height: 34px; max-width: none; padding: 4px 2px 2px; gap: 3px; } /* bouton Démarrer */ :root[data-ui="win95"] .topbar .brand { height: 26px; margin-right: 3px; padding: 0 6px 0 4px; gap: 5px; background: #c0c0c0; box-shadow: var(--w-out); cursor: pointer; user-select: none; } :root[data-ui="win95"] .topbar .brand:active { box-shadow: var(--w-in); } :root[data-ui="win95"] .topbar .brand .logo { width: 18px; height: 18px; border-radius: 0; } :root[data-ui="win95"] .topbar .brand-text { font-size: 12px; } /* boutons de tâches */ :root[data-ui="win95"] .side-tabs { flex: 1 1 auto; align-self: center; height: 26px; gap: 3px; } :root[data-ui="win95"] .side-tabs button { height: 26px; min-width: 0; padding: 0 8px; gap: 6px; border-radius: 0; background: #c0c0c0; color: #000; font-size: 12px; font-weight: 400; box-shadow: var(--w-out); } :root[data-ui="win95"] .side-tabs button:not(.admin-tab) { min-width: 104px; justify-content: flex-start; } :root[data-ui="win95"] .side-tabs button::before { width: 16px; height: 16px; } :root[data-ui="win95"] .side-tabs button[aria-selected="true"] { background: var(--w-dither); color: #000; font-weight: 700; box-shadow: var(--w-in); } :root[data-ui="win95"] .side-tabs button:hover { color: #000; } :root[data-ui="win95"] .side-tabs [data-tab="groups"] { margin-left: 8px; } :root[data-ui="win95"] .tab-count { min-width: 16px; height: 16px; font-size: 10px; } /* zone de notification : un seul creux (cloche, nouvelle discussion, profil, menu, horloge) */ :root[data-ui="win95"] .side-actions { margin-left: auto; height: 26px; padding: 0 2px; gap: 0; box-shadow: inset 1px 1px #808080, inset 0 -1px #fff; } :root[data-ui="win95"] .me-bar { height: 26px; margin-left: -3px; padding: 0 2px; gap: 0; border-left: 0; box-shadow: inset 0 1px #808080, inset 0 -1px #fff; } :root[data-ui="win95"] .tray-clock { display: flex; align-items: center; height: 26px; margin-left: -3px; padding: 0 10px 0 6px; box-shadow: inset 0 1px #808080, inset -1px -1px #fff; font-size: 12px; font-variant-numeric: tabular-nums; } :root[data-ui="win95"] .topbar .me-text { display: none !important; } :root[data-ui="win95"] .me, :root[data-ui="win95"] .me:hover { padding: 2px; border-radius: 0; background: none; } :root[data-ui="win95"] .topbar .me .avatar { width: 20px; height: 20px; font-size: 9px; } :root[data-ui="win95"] .side-actions .icon-btn, :root[data-ui="win95"] .me-bar .icon-btn { width: 24px; height: 22px; } :root[data-ui="win95"] .inbox-pop { height: 20px; margin-right: 4px; border-radius: 0; background: #ffffe1; color: #000; box-shadow: 0 0 0 1px #000; font-weight: 700; } :root[data-ui="win95"] .inbox-pop::after { display: none; } /* fenêtres : liste, discussion, panneau */ :root[data-ui="win95"] .sidebar, :root[data-ui="win95"] .chat, :root[data-ui="win95"] .panel { border: 0; border-radius: 0; padding: 3px; background: #c0c0c0; box-shadow: var(--w-window); } :root[data-ui="win95"] .shell > .panel { background-color: #c0c0c0; box-shadow: var(--w-window); } /* avatars : carrés, une couleur unie par personne (au lieu des dégradés) ; photos en basse résolution et en 216 couleurs tramées (calculées par app.js), agrandies en gros pixels */ :root[data-ui="win95"] .avatar { border-radius: 0; box-shadow: none; background-image: none !important; } :root[data-ui="win95"] .avatar.group { border-radius: 0; } :root[data-ui="win95"] .avatar[data-g="0"] { background: #800080 !important; } :root[data-ui="win95"] .avatar[data-g="1"] { background: #a00050 !important; } :root[data-ui="win95"] .avatar[data-g="2"] { background: #806000 !important; } :root[data-ui="win95"] .avatar[data-g="3"] { background: #007040 !important; } :root[data-ui="win95"] .avatar[data-g="4"] { background: #000080 !important; } :root[data-ui="win95"] .avatar[data-g="5"] { background: #006080 !important; } :root[data-ui="win95"] .avatar[data-g="6"] { background: #600090 !important; } :root[data-ui="win95"] .avatar[data-g="7"] { background: #407000 !important; } :root[data-ui="win95"] .avatar[data-g="8"] { background: #a03000 !important; } :root[data-ui="win95"] .avatar[data-g="9"] { background: #0040a0 !important; } :root[data-ui="win95"] .avatar[data-g="general"] { background: #008080 !important; } :root[data-ui="win95"] .avatar img { border-radius: 0; image-rendering: pixelated; } :root[data-ui="win95"] .avatar img:not(.px) { visibility: hidden; } :root[data-ui="win95"] .avatar.online::after { right: -2px; bottom: -2px; width: 9px; height: 9px; border: 1px solid #000; border-radius: 0; background: #00c000; } :root[data-ui="win95"] .avatar.is-live { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c00000; } /* stories : cadres carrés (enfoncé = déjà vue, bleu marine = nouvelle) */ :root[data-ui="win95"] .story-ring { padding: 3px; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-in); transition: none; } :root[data-ui="win95"] .story-ring:hover { transform: none; } :root[data-ui="win95"] .story-ring.unseen, :root[data-ui="win95"] .story-ring.mine { background: #000080; box-shadow: var(--w-out); } :root[data-ui="win95"] .story-ring.plan-glow { border-radius: 0; background: #800000; box-shadow: var(--w-out); animation: none; } :root[data-ui="win95"] .story-ring .avatar { border: 2px solid #c0c0c0; border-radius: 0; } :root[data-ui="win95"] .story-ring .avatar.photo img { border-radius: 0; } :root[data-ui="win95"] .story-plus { top: 32px; right: 4px; width: 18px; height: 18px; border: 0; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); font-size: 13px; } :root[data-ui="win95"] .story-plus:active { box-shadow: var(--w-in); } /* titres (Fondateur, titres offerts) : mêmes couleurs et animations, en rectangle, sans halo flou */ :root[data-ui="win95"] .tbadge, :root[data-ui="win95"] .tbadge > span, :root[data-ui="win95"] .tb-ring, :root[data-ui="win95"] .tbadge::after { border-radius: 0; } :root[data-ui="win95"] .tbadge::before, :root[data-ui="win95"] .tb-glow { display: none; } :root[data-ui="win95"] .tbadge > span { background: #000; } /* liste : creux blanc, sélection bleu marine */ :root[data-ui="win95"] .search { padding: 6px 4px 4px; } :root[data-ui="win95"] .search svg { left: 12px; top: calc(50% + 1px); width: 14px; height: 14px; color: #000; } :root[data-ui="win95"] .search input { height: 24px; padding: 0 6px 0 26px; border-radius: 0; font-size: 12px; } :root[data-ui="win95"] .install-bar { margin: 2px 4px 4px; padding: 3px 3px 3px 8px; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-out); font-weight: 400; } :root[data-ui="win95"] .install-bar > svg { color: #000; } :root[data-ui="win95"] .stories-bar { border-bottom: 0; padding: 4px 8px 6px; } :root[data-ui="win95"] .story-name { color: #000; } :root[data-ui="win95"] .story-ring .avatar, :root[data-ui="win95"] .story-plus { border-color: #c0c0c0; } :root[data-ui="win95"] .side-scroll { margin: 2px 4px 4px; padding: 2px; background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .polls-bar { border-bottom: 1px solid #808080; } :root[data-ui="win95"] .conv-list { padding: 0; } :root[data-ui="win95"] .conv { gap: 8px; margin: 0; padding: 4px 6px; border-radius: 0; color: #000; } :root[data-ui="win95"] .conv:hover, :root[data-ui="win95"] .conv:active { background: none; } :root[data-ui="win95"] .conv.active, :root[data-ui="win95"] .conv.active:hover { background: #000080; box-shadow: none; } :root[data-ui="win95"] .conv.active :is(.conv-name, .conv-time, .conv-preview, .conv-preview .txt, .conv-preview .typing, .conv-preview .tick) { color: #fff; } :root[data-ui="win95"] .conv .avatar { width: 32px; height: 32px; font-size: 13px; } :root[data-ui="win95"] .conv-name { font-size: 12px; font-weight: 400; letter-spacing: 0; } :root[data-ui="win95"] .conv.unread .conv-name .nm { font-weight: 700; } :root[data-ui="win95"] .conv-time { color: #303030; font-size: 11px; } :root[data-ui="win95"] .conv.unread .conv-time { color: #000; font-weight: 700; } :root[data-ui="win95"] .conv-preview { margin-top: 1px; color: #303030; font-size: 12px; } :root[data-ui="win95"] .conv.unread .conv-preview { color: #000; } :root[data-ui="win95"] .conv-preview .typing { color: #000080; } :root[data-ui="win95"] .conv.channel-new { border: 1px dotted #000; } :root[data-ui="win95"] .channel-new-ico { background: #c0c0c0 !important; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .list-label { margin: 10px 6px 4px; color: #000; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; } :root[data-ui="win95"] .list-empty { color: #000; } :root[data-ui="win95"] .conv:focus-visible { outline: 1px dotted #000; outline-offset: -2px; } /* discussion : la barre du haut devient la barre de titre (boutons 16 × 14) ; messages dans un creux blanc */ :root[data-ui="win95"] .chat-head { height: 22px; min-height: 0; padding: 0 2px 0 3px; gap: 2px; border-bottom: 0; background: #000080; color: #fff; } :root[data-ui="win95"] .chat-title { height: 20px; gap: 4px; padding: 0; border-radius: 0; color: inherit; } :root[data-ui="win95"] .chat-title .avatar { width: 16px; height: 16px; font-size: 8px; box-shadow: none; } :root[data-ui="win95"] .chat-title .avatar.online::after, :root[data-ui="win95"] .chat-title .tbadge { display: none; } :root[data-ui="win95"] .chat-title-text { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; } :root[data-ui="win95"] .chat-title-text strong { font-size: 12px; font-weight: 700; letter-spacing: 0; color: inherit; } :root[data-ui="win95"] .chat-title-text small, :root[data-ui="win95"] .chat-title-text small.online, :root[data-ui="win95"] .chat-title-text small.typing { font-size: 11px; color: inherit; opacity: .85; } :root[data-ui="win95"] .chat-head .icon-btn { width: 16px; height: 14px; margin-left: 2px; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .chat-head .icon-btn svg { width: 10px; height: 10px; stroke-width: 2.6; } :root[data-ui="win95"] .chat-head .icon-btn:hover { background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .chat-head .icon-btn:active { box-shadow: var(--w-in); } :root[data-ui="win95"] .call-banner { border-bottom: 0; margin-top: 3px; background: #ffffe1; box-shadow: 0 0 0 1px #000; } :root[data-ui="win95"] .messages { margin-top: 3px; padding: 12px 14px 10px; box-shadow: var(--w-field); } :root[data-ui="win95"] .messages:not(.has-wp) { background-color: #fff; } :root[data-ui="win95"] #messages { margin-bottom: 0; padding-bottom: 10px; } :root[data-ui="win95"] .day { margin: 12px 0 8px; padding: 0; border: 0; border-radius: 0; background: none; color: #303030; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; } :root[data-ui="win95"] .messages.has-wp .day, :root[data-ui="win95"] .messages.has-wp .sys { padding: 2px 6px; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .unread-chip { color: #000080; } :root[data-ui="win95"] .unread-chip::before, :root[data-ui="win95"] .unread-chip::after { background: #000080; } :root[data-ui="win95"] .sys { color: #303030; font-size: 12px; } /* bulles : infobulle jaune pour les messages reçus, sélection bleu marine pour les miens */ :root[data-ui="win95"] .bubble { border-radius: 0; } :where(:root[data-ui="win95"]) .bubble { padding: 4px 8px 5px; } /* (:where() : photo, vocal, sondage, sticker, bulles illustrées gardent leur marge) */ :root[data-ui="win95"] .msg.in .bubble { border: 1px solid #000; border-radius: 0; background: #ffffe1; color: #000; box-shadow: none; } :root[data-ui="win95"] .msg.out .bubble { border: 1px solid #000; border-radius: 0; background: #000080; color: #fff; box-shadow: none; --on-grad: #fff; --on-grad-meta: rgba(255, 255, 255, .8); --on-grad-faint: rgba(255, 255, 255, .2); --on-grad-tick: #fff; } :root[data-ui="win95"] .msg.new { animation: none; } :root[data-ui="win95"] .msg .bubble[class*="skin-"] { padding-top: 9px; padding-bottom: 9px; } /* (bulles illustrées : assez hautes pour l'animal) */ :root[data-ui="win95"] .text { font-size: 13px; line-height: 18px; } :root[data-ui="win95"] .meta { color: #303030; } :root[data-ui="win95"] .msg.out .meta { color: var(--on-grad-meta); } :root[data-ui="win95"] .msg.in .text a { color: #0000ff; } :root[data-ui="win95"] .sender { font-size: 12px; font-weight: 700; } :root[data-ui="win95"] .meta, :root[data-ui="win95"] .meta.clickable { border-radius: 0; } :root[data-ui="win95"] .chat-title-text small, :root[data-ui="win95"] .poll-sub, :root[data-ui="win95"] .poll-foot, :root[data-ui="win95"] .poll-check { opacity: 1; } :root[data-ui="win95"] .msg.out .poll-sub, :root[data-ui="win95"] .msg.out .poll-foot, :root[data-ui="win95"] .msg.out .poll-close { color: #fff; } :root[data-ui="win95"] .quote { border-radius: 0; background: rgba(0, 0, 0, .06); } :root[data-ui="win95"] .msg-menu-btn { border: 0; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .msg-menu-btn:hover { background: #c0c0c0; color: #000; } :root[data-ui="win95"] .typing-bubble { border: 1px solid #000; border-radius: 0; background: #ffffe1; } :root[data-ui="win95"] .typing-bubble i { border-radius: 0; background: #000; } :root[data-ui="win95"] .react-chip { border: 0; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .react-chip.mine { background: var(--w-dither); box-shadow: var(--w-in); } :root[data-ui="win95"] .react-chip:hover { border-color: transparent; } :root[data-ui="win95"] .media-img, :root[data-ui="win95"] .media-video, :root[data-ui="win95"] .bubble.media .meta, :root[data-ui="win95"] .upload-tag { border-radius: 0; } :root[data-ui="win95"] .bubble.media { padding: 2px; } :root[data-ui="win95"] .poll-opt { border: 1px solid #000; border-radius: 0; background: #fff; color: #000; } :root[data-ui="win95"] .msg.out .poll-opt { border-color: #fff; } :root[data-ui="win95"] .poll-fill, :root[data-ui="win95"] .msg.in .poll-fill { background: rgba(0, 0, 128, .2); } :root[data-ui="win95"] .poll-check { border-radius: 0; } :root[data-ui="win95"] .poll-opt.voted { border-color: #000; } :root[data-ui="win95"] .poll-opt.voted .poll-check { background: #000; border-color: #000; color: #fff; } :root[data-ui="win95"] .poll-close { border-radius: 0; } :root[data-ui="win95"] .ap-btn, :root[data-ui="win95"] .msg.in .ap-btn { border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .ap-bar, :root[data-ui="win95"] .msg.in .ap-bar, :root[data-ui="win95"] .msg.out .ap-bar { height: 8px; border-radius: 0; background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .ap-fill, :root[data-ui="win95"] .msg.in .ap-fill, :root[data-ui="win95"] .msg.out .ap-fill { border-radius: 0; background: #000080; } :root[data-ui="win95"] .to-bottom { border: 0; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .to-bottom:hover { background: #c0c0c0; } /* barre d'écriture : zone grise sous les messages, champ creusé, boutons en relief */ :root[data-ui="win95"] .composer-wrap { width: auto; margin: 3px 0 0; padding: 3px 0 0; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: none; } :root[data-ui="win95"] .composer-wrap:focus-within { box-shadow: none; } :root[data-ui="win95"] .composer { gap: 4px; } :root[data-ui="win95"] .composer textarea { min-height: 30px; padding: 5px 6px; background: #fff; box-shadow: var(--w-field); font-size: 13px; line-height: 18px; } :root[data-ui="win95"] .composer textarea:focus { background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .send-btn, :root[data-ui="win95"] .attach-btn { width: 34px; height: 30px; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .send-btn:active:not(:disabled), :root[data-ui="win95"] .attach-btn:active { transform: none; box-shadow: var(--w-in); } :root[data-ui="win95"] .send-btn:disabled { background: #c0c0c0; color: #808080; } :root[data-ui="win95"] .send-btn:hover:not(:disabled) { background: #c0c0c0; transform: none; } :root[data-ui="win95"] .attach-btn:hover svg { transform: none; } :root[data-ui="win95"] .reply-bar { padding: 0 0 4px; } :root[data-ui="win95"] .rec-dot { border-radius: 0; } :root[data-ui="win95"] .rec-wave i { border-radius: 0; background: #000080; } :root[data-ui="win95"] .readonly-bar { color: #000; } /* aucune discussion ouverte */ :root[data-ui="win95"] .chat-empty { padding: 24px; color: #000; } :root[data-ui="win95"] .chat-empty h2 { margin: 6px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1.25; } :root[data-ui="win95"] .chat-empty p { color: #000; font-size: 12px; } :root[data-ui="win95"] .empty-bento { gap: 8px; margin-top: 22px; } :root[data-ui="win95"] .bento-card { border: 0; border-radius: 0; padding: 10px; gap: 10px; background: #c0c0c0; color: #000; box-shadow: var(--w-out); transform: none; } :root[data-ui="win95"] .bento-card:hover { background-color: #c0c0c0; } :root[data-ui="win95"] .bento-card:active { box-shadow: var(--w-in); transform: none; } :root[data-ui="win95"] .bento-card .bento-ico { width: 32px; height: 32px; border-radius: 0; background: none; box-shadow: none; } :root[data-ui="win95"] .bento-card .bento-ico svg { width: 24px; height: 24px; } :root[data-ui="win95"] .bento-card b { font-size: 13px; font-weight: 700; letter-spacing: 0; } :root[data-ui="win95"] .bento-card.big b { font-size: 16px; letter-spacing: 0; } :root[data-ui="win95"] .bento-card small { color: #000; font-size: 12px; } /* panneau d'infos : barre de titre, cadres gravés */ :root[data-ui="win95"] .panel-head { height: 20px; min-height: 0; padding: 0 2px 0 4px; border-bottom: 0; background: #000080; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; } :root[data-ui="win95"] .panel-head .icon-btn, :root[data-ui="win95"] .modal-head .icon-btn, :root[data-ui="win95"] .history-head .icon-btn { width: 16px; height: 14px; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .panel-head .icon-btn svg, :root[data-ui="win95"] .modal-head .icon-btn svg, :root[data-ui="win95"] .history-head .icon-btn svg { width: 10px; height: 10px; stroke-width: 2.6; } :root[data-ui="win95"] :is(.panel-head, .modal-head, .history-head) .icon-btn:hover { background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] :is(.panel-head, .modal-head, .history-head) .icon-btn:active { box-shadow: var(--w-in); } :root[data-ui="win95"] .panel { animation: none; } :root[data-ui="win95"] .panel-body { margin-top: 3px; } :root[data-ui="win95"] .panel-hero { border-bottom: 0; padding: 18px 12px 10px; } :root[data-ui="win95"] .panel-hero h2 { font-size: 18px; font-weight: 700; letter-spacing: 0; } :root[data-ui="win95"] .panel-hero p { color: #000; } :root[data-ui="win95"] .panel-section { margin: 6px 6px 10px; padding: 12px 10px 10px; border: 1px solid #808080; box-shadow: 1px 1px #fff, inset 1px 1px #fff; } :root[data-ui="win95"] .panel-label, :root[data-ui="win95"] .section-title, :root[data-ui="win95"] .emoji-cat, :root[data-ui="win95"] .sticker-pack, :root[data-ui="win95"] .gv-side h3 { color: #000; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; } :root[data-ui="win95"] .person-name small { color: #303030; } /* menus : fenêtre grise, survol bleu marine */ :root[data-ui="win95"] .menu { min-width: 200px; padding: 2px; border: 0; border-radius: 0; background: #c0c0c0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--w-window); animation: none; } :root[data-ui="win95"] .menu button { min-height: 24px; padding: 3px 22px 3px 6px; border-radius: 0; color: #000; font-size: 12px; } :root[data-ui="win95"] .menu button svg.lc { width: 16px; height: 16px; color: #000; } :root[data-ui="win95"] .menu button:hover, :root[data-ui="win95"] .menu button:focus-visible { background: #000080; color: #fff; outline: none; } :root[data-ui="win95"] .menu button:hover svg.lc, :root[data-ui="win95"] .menu button:focus-visible svg.lc { color: #fff; transform: none; } :root[data-ui="win95"] .menu button.danger, :root[data-ui="win95"] .menu button.danger svg.lc { color: #000; } :root[data-ui="win95"] .menu button.danger:hover, :root[data-ui="win95"] .menu button.danger:hover svg.lc { background: #000080; color: #fff; } /* menu Démarrer : bandeau vertical gris à gauche, entrées plus hautes ; le bouton reste enfoncé pendant qu'il est ouvert */ :root[data-ui="win95"] .menu.start-menu { padding-left: 27px; } :root[data-ui="win95"] .menu.start-menu::before { content: "Insteddy"; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 22px; padding: 6px 0 0; overflow: hidden; background: #808080; color: #c0c0c0; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -.02em; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } :root[data-ui="win95"] .menu.start-menu button { min-height: 30px; gap: 10px; font-size: 12px; } :root[data-ui="win95"] .menu.start-menu button svg.lc { width: 20px; height: 20px; } :root[data-ui="win95"] body:has(#menu.start-menu:not([hidden])) .topbar .brand { box-shadow: var(--w-in); } :root[data-ui="win95"] .menu-sep { height: 2px; margin: 3px 2px; background: none; box-shadow: inset 0 1px #808080, inset 0 -1px #fff; } :root[data-ui="win95"] .react-quick { border-bottom: 1px solid #808080; } :root[data-ui="win95"] .menu .react-quick button, :root[data-ui="win95"] .menu .emoji-row button { border-radius: 0; } :root[data-ui="win95"] .menu .react-quick button:hover { transform: none; } :root[data-ui="win95"] .menu .react-quick button.on { background: var(--w-dither); box-shadow: var(--w-in); } /* fenêtres de dialogue */ :root[data-ui="win95"] .modal-back { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; animation: none; } :root[data-ui="win95"] .modal { padding: 3px; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-window); animation: none; } :root[data-ui="win95"] .modal-head { min-height: 0; height: 22px; padding: 0 3px 0 4px; background: #000080; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; } :root[data-ui="win95"] .modal-body { padding: 12px 10px 10px; } :root[data-ui="win95"] .modal-foot { padding: 6px 10px 10px; border-top: 0; background: none; } :root[data-ui="win95"] .modal input[type="search"], :root[data-ui="win95"] .modal input[type="text"], :root[data-ui="win95"] .modal input[type="number"] { height: 26px; padding: 0 6px; border-radius: 0; } :root[data-ui="win95"] .pick { border-radius: 0; } :root[data-ui="win95"] .pick:hover, :root[data-ui="win95"] .pick:active { background: none; } :root[data-ui="win95"] .pick.chosen, :root[data-ui="win95"] .pick.chosen:hover { background: #000080; color: #fff; box-shadow: none; } :root[data-ui="win95"] .pick.chosen small { color: #fff; } :root[data-ui="win95"] .new-group, :root[data-ui="win95"] .new-group:hover { border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-out); } :root[data-ui="win95"] .privacy-opt, :root[data-ui="win95"] .privacy-opt:hover { border: 1px solid #808080; border-radius: 0; background: #fff; box-shadow: none; } :root[data-ui="win95"] .privacy-opt.on { border-color: #000; background: #ffffe1; } :root[data-ui="win95"] .check-row, :root[data-ui="win95"] .check-row.accept { border: 1px solid #808080; border-radius: 0; background: #fff; } :root[data-ui="win95"] :is(.pf-market, .eco-balance, .note-item, .badge-preview, .rules-box, .chat-preview, .appeal-thread, .push-row, .eco-help, .report-conv, .poll-votes-opt, .ov-section) { border: 0; border-radius: 0; background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .rules-box.open { background: none; box-shadow: none; } :root[data-ui="win95"] .note-ico, :root[data-ui="win95"] .friends-ico, :root[data-ui="win95"] .act-kind { border-radius: 0; background: #c0c0c0; box-shadow: var(--w-out); } :root[data-ui="win95"] .act-row { border-radius: 0; } :root[data-ui="win95"] .act-row:hover { background: none; } :root[data-ui="win95"] .act-row.unread { background: #ffffe1; box-shadow: none; } :root[data-ui="win95"] .swatch, :root[data-ui="win95"] .wp-tile .wp-swatch, :root[data-ui="win95"] .skin-card, :root[data-ui="win95"] .badge-color, :root[data-ui="win95"] .badge-mix, :root[data-ui="win95"] .tx-dot, :root[data-ui="win95"] .stk-color { border-radius: 0; } :root[data-ui="win95"] .swatch { box-shadow: var(--w-out); } :root[data-ui="win95"] .swatch[aria-pressed="true"] { border-color: #000; box-shadow: var(--w-in); } :root[data-ui="win95"] .skin-card { border-color: #808080; background: #fff; } :root[data-ui="win95"] .skin-card[aria-pressed="true"] { border-color: #000; box-shadow: none; } :root[data-ui="win95"] .wp-preview { border-radius: 0; } :root[data-ui="win95"] .toast { padding: 4px 8px; border: 1px solid #000; border-radius: 0; background: #ffffe1; color: #000; font-size: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: none; } :root[data-ui="win95"] .viewer { -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } :root[data-ui="win95"] .viewer img { border-radius: 0; box-shadow: none; } :root[data-ui="win95"] .hourglass { border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .signup-dots span { border: 0; border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .signup-dots .on { background: var(--w-dither); color: #000; box-shadow: var(--w-in); } :root[data-ui="win95"] .signup-dots i, :root[data-ui="win95"] .signup-dots .on i, :root[data-ui="win95"] .signup-dots .done i { border-radius: 0; background: #000080; color: #fff; } :root[data-ui="win95"] .step-title { font-size: 18px; font-weight: 700; letter-spacing: 0; } :root[data-ui="win95"] .step-sub { color: #000; } /* administration */ :root[data-ui="win95"] .admin-toolbar { background: #c0c0c0; } :root[data-ui="win95"] .admin-group-head { border-radius: 0; background: #000080; color: #fff; } :root[data-ui="win95"] .admin-group-head .muted, :root[data-ui="win95"] .admin-group-head .pick-head { color: #fff; } :root[data-ui="win95"] :is(.admin-group-head, .pick.chosen, .conv.active) :is(.lvl, .cls-letter) { color: #fff !important; } /* (sur le bleu marine) */ :root[data-ui="win95"] .pin-ico { opacity: 1; } :root[data-ui="win95"] .modal .admin-toolbar input { border-radius: 0; } /* cartes de la liste : jeux, reels, sondages, « Pour toi » */ :root[data-ui="win95"] .game-card, :root[data-ui="win95"] .home-poll, :root[data-ui="win95"] .foryou-start { border: 0; border-radius: 0; padding: 8px; background: #c0c0c0; color: #000; box-shadow: var(--w-out); } :root[data-ui="win95"] .game-card:hover, :root[data-ui="win95"] .foryou-start:hover:not(:disabled) { background-color: #c0c0c0; } :root[data-ui="win95"] .game-card:active, :root[data-ui="win95"] .foryou-start:active:not(:disabled) { transform: none; box-shadow: var(--w-in); } :root[data-ui="win95"] .gc-ico { border-radius: 0; background: none; box-shadow: none; } :root[data-ui="win95"] .gc-play { border-radius: 0; background: #c0c0c0; color: #000; box-shadow: var(--w-out); font-weight: 400; } :root[data-ui="win95"] .gc-title small, :root[data-ui="win95"] .games-hint { color: #303030; } :root[data-ui="win95"] .reel-card { border: 0; border-radius: 0; box-shadow: var(--w-field); } :root[data-ui="win95"] .reel-card:hover:not(:disabled) { transform: none; } :root[data-ui="win95"] .foryou-start .fy-ico { border-radius: 0; background: #000080; color: #fff; } :root[data-ui="win95"] .home-poll .poll-opt { border-radius: 0; background: #fff; } :root[data-ui="win95"] .board li.me .who { color: #000080; } /* connexion : deux fenêtres sur le bureau sarcelle */ :root[data-ui="win95"] .auth { background: #008080; } :root[data-ui="win95"] .auth-card, :root[data-ui="win95"] .auth-aside { padding: 3px 3px 14px; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-window); text-align: left; } :root[data-ui="win95"] .auth-card > *, :root[data-ui="win95"] .auth-aside > * { margin-left: 12px; margin-right: 12px; } :root[data-ui="win95"] .auth-card .tabs { margin-top: 14px; margin-bottom: 16px; } :root[data-ui="win95"] .auth-card > .logo.big { margin-top: 14px; } :root[data-ui="win95"] .auth h1 { font-size: 20px; font-weight: 700; } :root[data-ui="win95"] .auth-sub { color: #000; } :root[data-ui="win95"] .auth-error { color: #a00000; } :root[data-ui="win95"] .auth-aside { align-self: center; } :root[data-ui="win95"] .auth-aside .eyebrow { margin-top: 14px; } :root[data-ui="win95"] .auth-aside .auth-title { margin-top: 8px; margin-bottom: 10px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: 0; } :root[data-ui="win95"] .auth-aside .auth-title em { color: #000080; } :root[data-ui="win95"] .auth-aside > p { color: #000; font-size: 13px; } :root[data-ui="win95"] .auth-points { margin-top: 16px; gap: 8px; } :root[data-ui="win95"] .auth-points li { padding: 8px; border: 0; border-radius: 0; background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .auth-points li > span { border-radius: 0; background: none; color: #000; box-shadow: none; } :root[data-ui="win95"] .auth-points small { color: #303030; } /* écrans à part (historique, jeux) */ :root[data-ui="win95"] .history { border: 0; border-radius: 0; padding: 3px; background: #c0c0c0; box-shadow: var(--w-window); animation: none; } :root[data-ui="win95"] .history-head { min-height: 22px; padding: 0 3px 0 4px; border-bottom: 0; background: #000080; color: #fff; } :root[data-ui="win95"] .history-title small { color: #fff; } :root[data-ui="win95"] .history-bar { border-top: 0; background: #c0c0c0; } :root[data-ui="win95"] .game-viewer { background: #008080; color: #fff; } :root[data-ui="win95"] .gv-head { color: #fff; } /* thème choisi : cartes du sélecteur */ :root[data-ui="win95"] .theme-card { border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--w-out); } :root[data-ui="win95"] .theme-card[aria-checked="true"] { background: var(--w-dither); box-shadow: var(--w-in); } :root[data-ui="win95"] .theme-card:hover { border-color: transparent; } :root[data-ui="win95"] .theme-check { border-radius: 0; border: 0; background: #fff; box-shadow: var(--w-field); } :root[data-ui="win95"] .theme-card[aria-checked="true"] .theme-check { background: #fff; color: #000; } :root[data-ui="win95"] .theme-text small { color: #303030; } @media (max-width: 1279px) { :root[data-ui="win95"] .side-tabs button:not(.admin-tab) { min-width: 0; } } /* (petits écrans d'ordinateur) */ /* tablette et téléphone : la barre des tâches reste en bas, les onglets y restent (pas de menu plein écran) */ @media (max-width: 1023px) { :root[data-ui="win95"] .nav-toggle { display: none; } :root[data-ui="win95"] .topbar-inner { flex-wrap: nowrap; height: 34px; padding: 4px 2px 2px; gap: 3px; } :root[data-ui="win95"] .topbar .brand { flex: none; height: 26px; } :root[data-ui="win95"] .side-tabs { position: static; inset: auto; order: 0; flex: 1 1 auto; min-width: 0; width: auto; height: 26px; margin: 0; padding: 0; flex-direction: row; justify-content: flex-start; overflow-x: auto; visibility: visible; opacity: 1; pointer-events: auto; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: none; } :root[data-ui="win95"] .side-tabs button { flex-direction: row; height: 26px; padding: 0 6px; font-size: 12px; letter-spacing: 0; border-radius: 0; } :root[data-ui="win95"] .side-tabs button:not(.admin-tab) { min-width: 0; } :root[data-ui="win95"] .side-tabs button:not([aria-selected="true"]) { gap: 0; font-size: 0; } /* (place comptée : seule la tâche ouverte garde son nom) */ :root[data-ui="win95"] .side-tabs button::before { width: 16px; height: 16px; } :root[data-ui="win95"] .side-tabs [data-tab="groups"] { margin: 0 0 0 6px; } :root[data-ui="win95"] .side-tabs .tab-count { position: static; min-width: 16px; height: 16px; font-size: 10px; box-shadow: none; } :root[data-ui="win95"] .tray-clock { display: none; } } @media (max-width: 760px) { :root[data-ui="win95"] .layout { padding: calc(env(safe-area-inset-top) + 6px) 6px 0; gap: 6px; } :root[data-ui="win95"] .layout.in-chat { padding: 0; gap: 0; } :root[data-ui="win95"] .topbar { margin: 0 -6px; padding-bottom: env(safe-area-inset-bottom); } :root[data-ui="win95"] .topbar-inner { height: 40px; padding: 5px 3px 3px; } :root[data-ui="win95"] .topbar .brand { height: 30px; padding: 0 5px; } :root[data-ui="win95"] .topbar .brand-text { display: none; } :root[data-ui="win95"] .side-tabs { height: 30px; gap: 2px; } :root[data-ui="win95"] .side-tabs button, :root[data-ui="win95"] .side-tabs:has(.admin-tab:not([hidden])) button { flex: 1 0 auto; height: 30px; min-width: 26px; padding: 0 4px; gap: 0; font-size: 0; } :root[data-ui="win95"] .side-tabs [data-tab="groups"] { margin: 0 0 0 4px; } :root[data-ui="win95"] .side-tabs button::before { width: 18px; height: 18px; } :root[data-ui="win95"] .side-tabs .tab-count { position: absolute; top: 1px; left: calc(50% + 4px); font-size: 10px; } :root[data-ui="win95"] .side-actions, :root[data-ui="win95"] .me-bar { height: 30px; } :root[data-ui="win95"] .side-scroll { padding-bottom: 2px; } :root[data-ui="win95"] .layout:not(.in-chat):not([hidden]) ~ .toast { bottom: calc(env(safe-area-inset-bottom) + 52px); } :root[data-ui="win95"] .sidebar { border: 0; border-radius: 0; } :root[data-ui="win95"] .chat { padding: calc(env(safe-area-inset-top) + 3px) 3px 3px; background: #c0c0c0; box-shadow: none; } :root[data-ui="win95"] .chat-head { height: 34px; min-height: 0; padding: 0 3px 0 2px; } :root[data-ui="win95"] .chat-head .icon-btn { width: 30px; height: 26px; } :root[data-ui="win95"] .chat-head .icon-btn svg { width: 14px; height: 14px; } :root[data-ui="win95"] .chat-title .avatar { width: 20px; height: 20px; } :root[data-ui="win95"] .chat-title-text { flex-direction: column; gap: 0; line-height: 1.2; } :root[data-ui="win95"] .composer-wrap { margin: 3px 0 0; padding: 3px 0 env(safe-area-inset-bottom); } :root[data-ui="win95"] .messages { padding: 10px 14px 8px; } :root[data-ui="win95"] .modal { border: 0; border-radius: 0; padding: 3px 3px calc(env(safe-area-inset-bottom) + 3px); animation: none; } :root[data-ui="win95"] .modal-head { height: 30px; } :root[data-ui="win95"] .modal-head .icon-btn { width: 30px; height: 24px; } :root[data-ui="win95"] .panel { padding-top: calc(env(safe-area-inset-top) + 3px); box-shadow: none; } :root[data-ui="win95"] .panel-head { height: 30px; padding-top: 0; } :root[data-ui="win95"] .panel-head .icon-btn { width: 30px; height: 24px; } :root[data-ui="win95"] .auth-card { border: 0; border-radius: 0; padding: 3px 3px 14px; } } /* ============================================================================================ Thème « Apple » (html[data-ui="apple"]) — d'après iOS / macOS (Messages) et apple.com : fonds #ffffff / #f2f2f7, texte #000 et gris, bleu d'Apple, bulles iMessage (grises reçues, bleues envoyées), barres translucides, listes à séparateurs fins, police du système (SF Pro sur les appareils Apple ; Inter, déjà sur le serveur, ailleurs). Contraste : les teintes « système » d'iOS (#007aff, #8e8e93, #ff3b30) ne passent pas le minimum de lisibilité (4,5:1) en petit texte ; on prend celles d'apple.com et des réglages « Contraste élevé » : bleu #0071e3 pour les aplats sous du texte blanc, #0066cc pour le texte et les icônes, gris #636366 / #6e6e73, rouge #d70015. Ordinateur : disposition de Messages sur Mac (barre d'outils, liste latérale grise, sélection bleue). Téléphone : disposition d'iOS (barre d'onglets en bas, liste blanche, barre de saisie iMessage). ============================================================================================ */ /* Inter (licence OFL, fonts/Inter-LICENSE.txt) : seulement là où la police d'Apple n'existe pas */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root[data-ui="apple"] { color-scheme: light; /* couleurs du thème */ --a-blue: #0071e3; /* aplats (boutons, bulles envoyées, sélection) : texte blanc à 4,7:1 */ --a-blue-hover: #0062c4; --a-link: #0066cc; /* texte et icônes bleus sur fond clair : 5,6:1 */ --a-red: #d70015; /* pastilles de compte (texte blanc 4,9:1) */ --a-red-text: #c00016; --a-grey: #636366; /* texte secondaire, même sur les bulles grises */ --a-grey-2: #6e6e73; /* texte secondaire sur blanc */ --a-icon: #8e8e93; /* icônes discrètes (pas du texte) */ --a-fill: rgba(118, 118, 128, .12); --a-tint: rgba(0, 113, 227, .09); --a-bar: rgba(249, 249, 249, .88); --a-blur: blur(20px) saturate(180%); --a-hairline: rgba(60, 60, 67, .29); /* jetons communs */ --bg: #f2f2f7; --bg-subtle: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #e5e5ea; --fill: rgba(118, 118, 128, .12); --fill-strong: rgba(120, 120, 128, .2); --border: rgba(60, 60, 67, .14); --border-strong: rgba(60, 60, 67, .29); --shell: transparent; --highlight: inset 0 0 0 0 transparent; --text: #000; --text-muted: #636366; --text-faint: #6e6e73; --accent: #0071e3; --accent-hover: #0062c4; --accent-text: #0066cc; --accent-soft: rgba(0, 113, 227, .1); --accent-border: rgba(0, 113, 227, .4); --ring: rgba(0, 113, 227, .5); --cta: #0071e3; --cta-hover: #0062c4; --on-cta: #fff; --danger: #d70015; --danger-text: #c00016; --ok: #248a3d; --bubble-in: #e9e9eb; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Helvetica Neue", "Segoe UI", sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", "Helvetica Neue", "Segoe UI", sans-serif; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 28px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 18px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --shadow-md: 0 4px 16px rgba(0, 0, 0, .08); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .08); --ease: cubic-bezier(.25, .1, .25, 1); --ease-out: cubic-bezier(.25, .1, .25, 1); --dur: .25s; --dur-slow: .35s; --sidebar-w: 340px; /* noms dans les groupes, lettres de classe : les mêmes teintes que d'habitude, en foncé (lisibles sur blanc et sur gris) */ --nc0: #155e75; --nc1: #be185d; --nc2: #166534; --nc3: #92400e; --nc4: #6d28d9; --nc5: #075985; --nc6: #be123c; --nc7: #4338ca; --nc8: #9a3412; --nc9: #115e59; --lc0: #b91c1c; --lc1: #7e22ce; --lc2: #115e59; --lc3: #9a3412; --lc4: #3f6212; --lc5: #4338ca; --lc6: #a21caf; --lc7: #854d0e; --lc8: #155e75; --lc9: #be123c; } :root[data-ui="apple"] body { --on-accent: #fff; letter-spacing: -.003em; } :root[data-ui="apple"] body::before { display: none; } :root[data-ui="apple"] ::selection { background: rgba(0, 113, 227, .22); } :root[data-ui="apple"] svg.lc { stroke-width: 1.75; } :root[data-ui="apple"] :focus-visible { outline: 3px solid rgba(0, 113, 227, .55); outline-offset: 1px; } :root[data-ui="apple"] * { scrollbar-color: rgba(0, 0, 0, .25) transparent; } :root[data-ui="apple"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22) padding-box; } :root[data-ui="apple"] .lvl-6 { color: #166534; } :root[data-ui="apple"] .lvl-5 { color: #075985; } :root[data-ui="apple"] .lvl-4 { color: #92400e; } :root[data-ui="apple"] .lvl-3 { color: #be185d; } :root[data-ui="apple"] .lvl-2 { color: #155e75; } :root[data-ui="apple"] .lvl-1 { color: #a21caf; } :root[data-ui="apple"] .lvl-t { color: #854d0e; } :root[data-ui="apple"] .muted, :root[data-ui="apple"] .note { color: var(--a-grey); } /* boutons : bleu plein (principal), bleu teinté (secondaire, comme les boutons « gris » d'iOS) */ :root[data-ui="apple"] .btn { min-height: 34px; padding: 7px 16px; border: 0; border-radius: 10px; background: var(--a-tint); color: var(--a-link); font-size: 15px; font-weight: 600; letter-spacing: -.01em; box-shadow: none; } :root[data-ui="apple"] .btn.primary { background: var(--a-blue); color: #fff; box-shadow: none; } :root[data-ui="apple"] .btn.danger { background: rgba(215, 0, 21, .07); color: var(--a-red-text); border: 0; } :root[data-ui="apple"] .btn.ghost { background: none; color: var(--a-link); } :root[data-ui="apple"] .btn:active:not(:disabled) { transform: none; opacity: .7; } :root[data-ui="apple"] .btn:disabled { opacity: .4; } :root[data-ui="apple"] .btn:hover:not(:disabled) { background: rgba(0, 113, 227, .14); border-color: transparent; } :root[data-ui="apple"] .btn.primary:hover:not(:disabled) { background: var(--a-blue-hover); } :root[data-ui="apple"] .btn.danger:hover:not(:disabled) { background: rgba(215, 0, 21, .12); } :root[data-ui="apple"] .btn.ghost:hover:not(:disabled) { background: var(--a-tint); } :root[data-ui="apple"] .btn.small { min-height: 28px; padding: 4px 12px; font-size: 13px; border-radius: 8px; } :root[data-ui="apple"] .btn .btn-orb { display: none; } :root[data-ui="apple"] .auth-form .btn.primary { justify-content: center; } :root[data-ui="apple"] .icon-btn { color: var(--a-link); border-radius: 50%; } :root[data-ui="apple"] .icon-btn:hover { background: var(--a-fill); color: var(--a-link); } :root[data-ui="apple"] .icon-btn:active { background: rgba(118, 118, 128, .2); transform: none; } :root[data-ui="apple"] .icon-btn .dot { background: var(--a-red); box-shadow: 0 0 0 2px #fff; } :root[data-ui="apple"] .icon-btn.accent, :root[data-ui="apple"] .icon-btn.accent:hover { width: 38px; min-width: 0; padding: 0; justify-content: center; background: none; color: var(--a-link); } :root[data-ui="apple"] .icon-btn.accent:hover { background: var(--a-fill); } :root[data-ui="apple"] .icon-btn.accent .btn-orb { width: auto; height: auto; margin: 0; background: none; } :root[data-ui="apple"] .icon-btn.accent svg { width: 21px; height: 21px; } :root[data-ui="apple"] .btn-label { display: none !important; } :root[data-ui="apple"] .link-btn { color: var(--a-link); text-decoration: none; font-weight: 400; } :root[data-ui="apple"] .link-btn:hover { text-decoration: underline; } /* champs */ :root[data-ui="apple"] input, :root[data-ui="apple"] textarea, :root[data-ui="apple"] select { border: 1px solid rgba(60, 60, 67, .22); border-radius: 10px; background-color: #fff; color: #000; box-shadow: none; } :root[data-ui="apple"] input:hover:not(:focus):not(:disabled), :root[data-ui="apple"] textarea:hover:not(:focus):not(:disabled), :root[data-ui="apple"] select:hover { border-color: rgba(60, 60, 67, .34); } :root[data-ui="apple"] input:focus, :root[data-ui="apple"] textarea:focus, :root[data-ui="apple"] select:focus { border-color: var(--a-blue); background-color: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, .2); } :root[data-ui="apple"] input::placeholder, :root[data-ui="apple"] textarea::placeholder { color: #8a8a8e; } :root[data-ui="apple"] input[type="checkbox"], :root[data-ui="apple"] input[type="radio"], :root[data-ui="apple"] input[type="range"] { border: 0; box-shadow: none; accent-color: var(--a-blue); } :root[data-ui="apple"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E"); } :root[data-ui="apple"] .modal input[type="search"], :root[data-ui="apple"] .search input { border: 0; background-color: var(--a-fill); } :root[data-ui="apple"] .modal input[type="search"]:focus, :root[data-ui="apple"] .search input:focus { background-color: var(--a-fill); } :root[data-ui="apple"] .auth-form label, :root[data-ui="apple"] .school-row label, :root[data-ui="apple"] .suggest-form label { color: var(--a-grey); font-weight: 500; } /* contrôle segmenté (texte seul, comme sur iPhone, iPad et Mac) */ :root[data-ui="apple"] .tabs, :root[data-ui="apple"] .seg, :root[data-ui="apple"] .admin-tabs { gap: 0; padding: 2px; border: 0; border-radius: 9px; background: var(--a-fill); box-shadow: none; } :root[data-ui="apple"] .tabs button, :root[data-ui="apple"] .seg button, :root[data-ui="apple"] .admin-tabs button { height: 30px; border-radius: 7px; color: #000; font-size: 13px; font-weight: 500; } :root[data-ui="apple"] .tabs button[aria-selected="true"], :root[data-ui="apple"] .seg button[aria-pressed="true"], :root[data-ui="apple"] .admin-tabs button[aria-selected="true"] { background: #fff; color: #000; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04); } :root[data-ui="apple"] .tabs button:hover, :root[data-ui="apple"] .seg button:hover, :root[data-ui="apple"] .admin-tabs button:hover { color: #000; } :root[data-ui="apple"] .gv-tab { border: 0; background: var(--a-fill); color: #000; } :root[data-ui="apple"] .gv-tab[aria-pressed="true"] { background: var(--a-blue); color: #fff; } /* étiquettes, pastilles, logo (icône d'appli arrondie) */ :root[data-ui="apple"] .eyebrow { height: auto; padding: 0; border: 0; background: none; color: #b64400; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-transform: none; } :root[data-ui="apple"] .eyebrow::before { display: none; } :root[data-ui="apple"] .tag { border: 0; border-radius: 6px; background: var(--a-fill); color: #3a3a3c; letter-spacing: 0; } :root[data-ui="apple"] .badge, :root[data-ui="apple"] .to-bottom span { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .tab-count, :root[data-ui="apple"] .count-pill, :root[data-ui="apple"] .menu .count, :root[data-ui="apple"] .inbox-count, :root[data-ui="apple"] .admin-row .chat-btn b { background: var(--a-red); color: #fff; box-shadow: none; } :root[data-ui="apple"] .logo { border-radius: 23%; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); } :root[data-ui="apple"] .brand-text { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; } :root[data-ui="apple"] .loader { background: #fff; } :root[data-ui="apple"] .loader-bar { background: rgba(118, 118, 128, .16); } :root[data-ui="apple"] .loader-bar::after { background: var(--a-icon); } :root[data-ui="apple"] .pin-ico { opacity: 1; } /* ------------------------------------------------ ordinateur : fenêtre façon Messages sur Mac */ :root[data-ui="apple"] .layout { padding: 0; gap: 0; } :root[data-ui="apple"] .topbar { justify-self: stretch; width: auto; max-width: none; border-radius: 0; } :root[data-ui="apple"] .topbar::before { border-radius: 0; background: var(--a-bar); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); box-shadow: inset 0 -.5px 0 var(--a-hairline); } :root[data-ui="apple"] .topbar-inner { height: 52px; max-width: none; padding: 0 12px 0 16px; gap: 8px; } :root[data-ui="apple"] .topbar .brand .logo { width: 28px; height: 28px; border-radius: 23%; } :root[data-ui="apple"] .topbar .brand-text { font-size: 15px; } /* onglets : contrôle segmenté au centre de la barre, en texte seul (comme la barre d'onglets de l'iPad) */ :root[data-ui="apple"] .side-tabs { flex: 0 1 auto; margin: 0 auto; height: 32px; padding: 2px; gap: 0; border-radius: 9px; background: var(--a-fill); } :root[data-ui="apple"] .side-tabs button { height: 28px; padding: 0 14px; gap: 6px; border-radius: 7px; color: #000; font-size: 13px; font-weight: 500; letter-spacing: -.005em; } :root[data-ui="apple"] .side-tabs button::before { display: none; } :root[data-ui="apple"] .side-tabs button[aria-selected="true"] { background: #fff; color: #000; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04); } :root[data-ui="apple"] .side-tabs button:hover { color: #000; } :root[data-ui="apple"] .side-tabs [data-tab="groups"] { margin-left: 6px; } :root[data-ui="apple"] .tab-count { min-width: 17px; height: 17px; font-size: 10.5px; } :root[data-ui="apple"] .side-actions { margin-left: 0; gap: 2px; } :root[data-ui="apple"] .me-bar { margin-left: 2px; padding-left: 8px; border-left: 0; } :root[data-ui="apple"] .me:hover { background: var(--a-fill); } :root[data-ui="apple"] .me-name { font-weight: 600; } :root[data-ui="apple"] .topbar .me .avatar { width: 30px; height: 30px; } :root[data-ui="apple"] .inbox-pop { border-radius: 9px; background: var(--a-red); } :root[data-ui="apple"] .inbox-pop::after { background: var(--a-red); } :root[data-ui="apple"] .shell { gap: 0; max-width: none; } :root[data-ui="apple"] .sidebar, :root[data-ui="apple"] .chat, :root[data-ui="apple"] .panel { border: 0; border-radius: 0; box-shadow: none; } :root[data-ui="apple"] .sidebar { background: #f5f5f7; border-right: 1px solid rgba(60, 60, 67, .15); } :root[data-ui="apple"] .chat { background: #fff; } :root[data-ui="apple"] .panel, :root[data-ui="apple"] .shell > .panel { background-color: #f2f2f7; box-shadow: -1px 0 0 rgba(60, 60, 67, .15); } :root[data-ui="apple"] .panel { animation: slide-in var(--dur-slow) var(--ease); } :root[data-ui="apple"] .avatar { box-shadow: none; } :root[data-ui="apple"] .avatar.group { border-radius: 50%; } :root[data-ui="apple"] .avatar.online::after { width: 12px; height: 12px; border-color: #fff; background: #34c759; } /* liste latérale */ :root[data-ui="apple"] .search { padding: 12px 12px 8px; } :root[data-ui="apple"] .search svg { left: 22px; color: var(--a-grey-2); } :root[data-ui="apple"] .search input { height: 34px; padding-left: 32px; border-radius: 10px; font-size: 15px; } :root[data-ui="apple"] .search input::placeholder { color: var(--a-grey-2); } :root[data-ui="apple"] .install-bar { margin: 0 12px 10px; border: 0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); font-weight: 500; } :root[data-ui="apple"] .install-bar > svg { color: var(--a-link); } :root[data-ui="apple"] .stories-bar { border-bottom: 0; } :root[data-ui="apple"] .story-ring .avatar, :root[data-ui="apple"] .story-plus { border-color: #f5f5f7; } :root[data-ui="apple"] .story-ring { background: #d1d1d6; } :root[data-ui="apple"] .story-plus { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .story-name { color: #3a3a3c; } :root[data-ui="apple"] .polls-bar { border-bottom: 0; } :root[data-ui="apple"] .conv-list { padding: 2px 10px 12px; } :root[data-ui="apple"] .conv { gap: 12px; margin: 0 0 1px; padding: 8px 10px; border-radius: 10px; } :root[data-ui="apple"] .conv:active { background: rgba(0, 0, 0, .05); } :root[data-ui="apple"] .conv:hover { background: rgba(0, 0, 0, .04); } :root[data-ui="apple"] .conv.active, :root[data-ui="apple"] .conv.active:hover { background: var(--a-blue); box-shadow: none; } :root[data-ui="apple"] .conv.active :is(.conv-name, .conv-time, .conv-preview, .conv-preview .txt, .conv-preview .typing, .conv-preview .tick) { color: #fff; } :root[data-ui="apple"] .conv.active .badge { background: #fff; color: var(--a-link); } @media (min-width: 761px) { :root[data-ui="apple"] .conv.active :is(.lvl, .cls-letter) { color: #fff !important; } } /* (sur la sélection bleue) */ :root[data-ui="apple"] .conv .avatar { width: 42px; height: 42px; } :root[data-ui="apple"] .conv-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; } :root[data-ui="apple"] .conv.unread .conv-name .nm { font-weight: 700; } :root[data-ui="apple"] .conv-time { font-size: 12px; color: var(--a-grey-2); } :root[data-ui="apple"] .conv.unread .conv-time { color: var(--a-link); } :root[data-ui="apple"] .conv-preview { color: var(--a-grey); font-size: 13px; } :root[data-ui="apple"] .conv.unread .conv-preview { color: #000; } :root[data-ui="apple"] .conv-preview .typing { color: var(--a-grey); } :root[data-ui="apple"] .conv.channel-new { border: 1px dashed rgba(60, 60, 67, .3); } :root[data-ui="apple"] .channel-new-ico { background: var(--a-tint) !important; color: var(--a-link); } :root[data-ui="apple"] .list-label { margin: 16px 10px 6px; color: var(--a-grey); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; } :root[data-ui="apple"] .list-empty { color: var(--a-grey); } /* en-tête de discussion : photo et nom au centre, boutons bleus à droite */ :root[data-ui="apple"] .chat-head { height: 64px; padding: 0 10px 0 12px; border-bottom: 0; background: rgba(255, 255, 255, .94); box-shadow: inset 0 -.5px 0 var(--a-hairline); } :root[data-ui="apple"] .chat-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); flex-direction: column; justify-content: center; gap: 3px; width: auto; max-width: 46%; height: 100%; padding: 0; border-radius: 0; text-align: center; } :root[data-ui="apple"] .chat-title .avatar { width: 34px; height: 34px; font-size: 13px; } :root[data-ui="apple"] .chat-title .avatar.online::after { width: 10px; height: 10px; } :root[data-ui="apple"] .chat-title-text { align-items: center; max-width: 100%; } :root[data-ui="apple"] .chat-title-text strong { justify-content: center; font-size: 12px; font-weight: 500; letter-spacing: 0; } :root[data-ui="apple"] .chat-title .tbadge, :root[data-ui="apple"] .chat-title-text small { display: none; } :root[data-ui="apple"] #video-btn { margin-left: auto; } :root[data-ui="apple"] .chat-head .icon-btn { color: var(--a-link); } :root[data-ui="apple"] .call-banner { border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--a-hairline); } /* messages : fond blanc, bulles iMessage */ :root[data-ui="apple"] .messages { padding: 16px max(20px, calc((100% - 760px) / 2)) 12px; } :root[data-ui="apple"] .messages:not(.has-wp) { background-color: #fff; } :root[data-ui="apple"] .day { margin: 16px 0 8px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--a-grey); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; } :root[data-ui="apple"] .messages.has-wp .day, :root[data-ui="apple"] .messages.has-wp .sys { padding: 3px 10px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #3a3a3c; } :root[data-ui="apple"] .unread-chip { color: var(--a-grey); } :root[data-ui="apple"] .unread-chip::before, :root[data-ui="apple"] .unread-chip::after { background: rgba(60, 60, 67, .18); } :root[data-ui="apple"] .sys { color: var(--a-grey); font-size: 12px; } :root[data-ui="apple"] .msg.first:not(.skinned) { margin-top: 10px; } /* (bulles illustrées : leur place pour le personnage, au-dessus) */ /* (marge des bulles avec :where() : les bulles particulières — photo, vocal, sondage, sticker, bulles illustrées — gardent la leur) */ :where(:root[data-ui="apple"]) .bubble { padding: 6px 12px 7px; } :root[data-ui="apple"] .bubble { border-radius: 18px; max-width: min(70%, 520px); } :root[data-ui="apple"] .msg.in .bubble { border: 0; border-radius: 18px; background: #e9e9eb; color: #000; box-shadow: none; } :root[data-ui="apple"] .msg.out .bubble { border-radius: 18px; background: var(--a-blue); color: #fff; box-shadow: none; --on-grad: #fff; --on-grad-meta: #fff; --on-grad-faint: rgba(255, 255, 255, .3); --on-grad-tick: #fff; } :root[data-ui="apple"] .text { font-size: 15px; line-height: 20px; letter-spacing: -.01em; } :root[data-ui="apple"] .sender { color: var(--a-grey); font-weight: 600; } :root[data-ui="apple"] .meta { color: var(--a-grey); } :root[data-ui="apple"] .msg.out .meta { color: #fff; } :root[data-ui="apple"] .msg.in .text a { color: var(--a-link); } :root[data-ui="apple"] .msg.out .text a { color: #fff; text-decoration: underline; } :root[data-ui="apple"] .quote { border-radius: 12px; background: rgba(0, 0, 0, .06); } :root[data-ui="apple"] .msg.out .bubble:not(.skinned) .quote { background: rgba(255, 255, 255, .18); } :root[data-ui="apple"] .msg.out .bubble:not(.skinned) .quote, :root[data-ui="apple"] .msg.out .bubble:not(.skinned) .quote * { color: #fff; } :root[data-ui="apple"] .msg-menu-btn { border: 0; background: #fff; color: var(--a-grey-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } :root[data-ui="apple"] .msg-menu-btn:hover { background: #fff; color: var(--a-link); } :root[data-ui="apple"] .typing-bubble { border: 0; border-radius: 18px; background: #e9e9eb; } :root[data-ui="apple"] .typing-bubble i { background: var(--a-icon); } :root[data-ui="apple"] .react-chip { border: 0; background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } :root[data-ui="apple"] .react-chip.mine { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .react-chip:hover { border-color: transparent; } :root[data-ui="apple"] .media-img, :root[data-ui="apple"] .media-video { border-radius: 16px; } /* sondages : texte plein (pas de transparence), lisible dans les deux bulles */ :root[data-ui="apple"] .poll-sub, :root[data-ui="apple"] .poll-foot, :root[data-ui="apple"] .poll-check { opacity: 1; } :root[data-ui="apple"] .msg.in .poll-sub, :root[data-ui="apple"] .msg.in .poll-foot { color: var(--a-grey); } :root[data-ui="apple"] .msg.out .poll-sub, :root[data-ui="apple"] .msg.out .poll-foot, :root[data-ui="apple"] .msg.out .poll-close { color: #fff; } :root[data-ui="apple"] .poll-opt { border: 1px solid rgba(60, 60, 67, .24); border-radius: 10px; background: #fff; color: #000; } :root[data-ui="apple"] .msg.out .poll-opt { border-color: transparent; } :root[data-ui="apple"] .poll-fill, :root[data-ui="apple"] .msg.in .poll-fill, :root[data-ui="apple"] .home-poll .poll-fill { background: rgba(0, 113, 227, .14); } :root[data-ui="apple"] .poll-opt.voted, :root[data-ui="apple"] .msg.out .poll-opt.voted { border-color: var(--a-blue); } :root[data-ui="apple"] .poll-opt.voted .poll-check, :root[data-ui="apple"] .msg.out .poll-opt.voted .poll-check { background: var(--a-blue); border-color: var(--a-blue); color: #fff; } :root[data-ui="apple"] .msg.in .ap-btn { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .msg.in .ap-bar { background: rgba(60, 60, 67, .22); } :root[data-ui="apple"] .msg.in .ap-fill { background: var(--a-blue); } :root[data-ui="apple"] .to-bottom { border: 0; background: rgba(255, 255, 255, .96); color: var(--a-link); box-shadow: 0 2px 10px rgba(0, 0, 0, .15), 0 0 0 .5px rgba(0, 0, 0, .06); } :root[data-ui="apple"] .to-bottom:hover { background: #fff; } /* barre de saisie iMessage : « + » gris à gauche, champ arrondi, envoi bleu dans le champ ; translucide par-dessus la discussion */ :root[data-ui="apple"] .composer-wrap { width: 100%; margin: 0; padding: 8px max(12px, calc((100% - 780px) / 2)) 10px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); box-shadow: inset 0 .5px 0 var(--a-hairline); } :root[data-ui="apple"] .composer-wrap:focus-within { box-shadow: inset 0 .5px 0 var(--a-hairline); } :root[data-ui="apple"] .composer { gap: 8px; } :root[data-ui="apple"] .attach-btn { width: 34px; height: 34px; margin-bottom: 1px; background: var(--a-fill); color: var(--a-grey); } :root[data-ui="apple"] .attach-btn svg { width: 18px; height: 18px; stroke-width: 2.2; } :root[data-ui="apple"] .attach-btn:hover svg { transform: none; } :root[data-ui="apple"] .composer textarea { min-height: 36px; padding: 7px 44px 7px 14px; border: 1px solid rgba(60, 60, 67, .3); border-radius: 18px; background: #fff; font-size: 15px; line-height: 20px; } :root[data-ui="apple"] .composer textarea:focus { border-color: rgba(60, 60, 67, .3); background: #fff; box-shadow: none; } :root[data-ui="apple"] .composer textarea:focus-visible { outline: none; } /* (comme dans Messages : le curseur suffit) */ :root[data-ui="apple"] .composer .send-btn { position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 0 3px -42px; background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .composer .send-btn svg { width: 16px; height: 16px; stroke-width: 2.6; transform: rotate(-45deg); } /* (flèche vers le haut, comme dans Messages) */ :root[data-ui="apple"] .composer .send-btn:disabled { background: #c7c7cc; color: #fff; } :root[data-ui="apple"] .composer .send-btn:hover:not(:disabled) { background: var(--a-blue-hover); transform: none; } :root[data-ui="apple"] .composer .mic-btn { background: none; color: var(--a-grey-2); } :root[data-ui="apple"] .composer .mic-btn svg { transform: none; stroke-width: 2; } :root[data-ui="apple"] .composer .mic-btn:hover:not(:disabled) { background: var(--a-fill); } :root[data-ui="apple"] .rec-bar .send-btn { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .rec-dot { background: var(--a-red); } :root[data-ui="apple"] .rec-wave i { background: var(--a-blue); } :root[data-ui="apple"] .reply-bar { color: var(--a-grey); } /* aucune discussion ouverte : comme un écran vide d'Apple (titre, texte gris, raccourcis) */ :root[data-ui="apple"] .chat-empty { background: #fff; color: var(--a-grey); } :root[data-ui="apple"] .chat-empty .eyebrow { display: none; } :root[data-ui="apple"] .chat-empty h2 { margin: 8px 0 6px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #000; } :root[data-ui="apple"] .chat-empty p { color: var(--a-grey); font-size: 15px; } :root[data-ui="apple"] .bento-card { border: 0; border-radius: 16px; background: #f2f2f7; box-shadow: none; } :root[data-ui="apple"] .bento-card:hover { background-color: #e9e9ee; } :root[data-ui="apple"] .bento-card:active { transform: none; opacity: .7; } :root[data-ui="apple"] .bento-card .bento-ico { border-radius: 10px; background: var(--a-blue); color: #fff; box-shadow: none; } :root[data-ui="apple"] .bento-card b { font-size: 15px; letter-spacing: -.01em; } :root[data-ui="apple"] .bento-card.big b { font-size: 20px; } :root[data-ui="apple"] .bento-card small { color: var(--a-grey); } :root[data-ui="apple"] .bento-card .btn-orb { background: var(--a-blue); color: #fff; } /* panneau d'infos : listes groupées sur fond gris */ :root[data-ui="apple"] .panel-head { border-bottom: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } :root[data-ui="apple"] .panel-head .icon-btn, :root[data-ui="apple"] .modal-head .icon-btn, :root[data-ui="apple"] .history-head .icon-btn { width: 30px; height: 30px; background: var(--a-fill); color: var(--a-grey); } :root[data-ui="apple"] :is(.panel-head, .modal-head, .history-head) .icon-btn svg { width: 14px; height: 14px; stroke-width: 2.6; } :root[data-ui="apple"] :is(.panel-head, .modal-head, .history-head) .icon-btn:hover { background: rgba(118, 118, 128, .2); color: #3a3a3c; } :root[data-ui="apple"] .panel-hero { border-bottom: 0; } :root[data-ui="apple"] .panel-hero h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; } :root[data-ui="apple"] .panel-hero p, :root[data-ui="apple"] .hero-school, :root[data-ui="apple"] .person-name small { color: var(--a-grey); } :root[data-ui="apple"] .panel-section { margin: 0 16px 18px; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff; } :root[data-ui="apple"] .panel-label { color: var(--a-grey); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; } :root[data-ui="apple"] .section-title, :root[data-ui="apple"] .emoji-cat, :root[data-ui="apple"] .sticker-pack, :root[data-ui="apple"] .gv-side h3 { color: var(--a-grey); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; } /* menus : comme les menus du Mac (verre clair, survol bleu) */ :root[data-ui="apple"] .menu { min-width: 220px; padding: 5px; border: 0; border-radius: 12px; background: rgba(246, 246, 246, .92) padding-box; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 12px 32px rgba(0, 0, 0, .2); } :root[data-ui="apple"] .menu button { min-height: 28px; padding: 4px 10px; border-radius: 6px; color: #000; font-size: 14px; gap: 10px; } :root[data-ui="apple"] .menu button svg.lc { width: 16px; height: 16px; color: #3a3a3c; } :root[data-ui="apple"] .menu button:hover, :root[data-ui="apple"] .menu button:focus-visible { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .menu button:hover svg.lc, :root[data-ui="apple"] .menu button:focus-visible svg.lc { color: #fff; transform: none; } :root[data-ui="apple"] .menu button.danger, :root[data-ui="apple"] .menu button.danger svg.lc { color: var(--a-red-text); } :root[data-ui="apple"] .menu button.danger:hover, :root[data-ui="apple"] .menu button.danger:hover svg.lc { background: var(--a-red); color: #fff; } :root[data-ui="apple"] .menu-sep { margin: 5px 10px; background: rgba(0, 0, 0, .1); } :root[data-ui="apple"] .react-quick { border-bottom-color: rgba(0, 0, 0, .1); } :root[data-ui="apple"] .menu .react-quick button:hover { background: rgba(118, 118, 128, .16); } :root[data-ui="apple"] .menu .react-quick button.on { background: rgba(0, 113, 227, .16); box-shadow: none; } /* fenêtres : feuilles blanches arrondies */ :root[data-ui="apple"] .modal-back { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .3); } :root[data-ui="apple"] .modal { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .1); } :root[data-ui="apple"] .modal-head { min-height: 56px; padding: 12px 12px 6px 20px; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; } :root[data-ui="apple"] .modal-foot { border-top: 1px solid rgba(60, 60, 67, .12); background: none; } :root[data-ui="apple"] .pick { border-radius: 10px; } :root[data-ui="apple"] .pick:hover { background: rgba(0, 0, 0, .04); } :root[data-ui="apple"] .pick.chosen, :root[data-ui="apple"] .pick.chosen:hover { background: rgba(0, 113, 227, .1); box-shadow: none; } :root[data-ui="apple"] .pick small, :root[data-ui="apple"] .pick-head { color: var(--a-grey); } :root[data-ui="apple"] .new-group, :root[data-ui="apple"] .new-group:hover { border: 0; border-radius: 12px; background: var(--a-tint); color: var(--a-link); box-shadow: none; } :root[data-ui="apple"] .privacy-opt { border: 0; border-radius: 12px; background: #f2f2f7; box-shadow: none; } :root[data-ui="apple"] .privacy-opt:hover { border-color: transparent; } :root[data-ui="apple"] .privacy-opt.on { background: rgba(0, 113, 227, .1); box-shadow: inset 0 0 0 1.5px var(--a-blue); } :root[data-ui="apple"] .privacy-opt small { color: var(--a-grey); } :root[data-ui="apple"] .check-row { border: 0; border-radius: 12px; background: #f2f2f7; } :root[data-ui="apple"] .check-row.accept { border: 0; background: rgba(0, 113, 227, .08); } :root[data-ui="apple"] :is(.pf-market, .eco-balance, .note-item, .badge-preview, .rules-box, .chat-preview, .appeal-thread, .push-row, .eco-help, .report-conv, .poll-votes-opt) { border: 0; border-radius: 12px; background: #f2f2f7; box-shadow: none; } :root[data-ui="apple"] .rules-box.open { background: none; } :root[data-ui="apple"] .rules-box h3 { color: #000; } :root[data-ui="apple"] .note-ico, :root[data-ui="apple"] .friends-ico { border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); } :root[data-ui="apple"] .act-row.unread { background: rgba(0, 113, 227, .08); box-shadow: none; } :root[data-ui="apple"] .act-body small { color: var(--a-grey); } :root[data-ui="apple"] .act-kind { background: #fff; box-shadow: var(--shadow-sm); } :root[data-ui="apple"] .swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--a-blue); } :root[data-ui="apple"] .skin-card { border-color: transparent; background: #f2f2f7; } :root[data-ui="apple"] .skin-card[aria-pressed="true"] { border-color: var(--a-blue); box-shadow: none; } :root[data-ui="apple"] .wp-tile .wp-swatch { color: #3a3a3c; } /* message bref (copié, envoyé…) : pastille sombre, lisible sur n'importe quel fond (comme les bandeaux d'iOS) */ :root[data-ui="apple"] .toast { border: 0; border-radius: 14px; background: rgba(28, 28, 30, .92); color: #fff; -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); } :root[data-ui="apple"] .viewer { background: rgba(0, 0, 0, .9); } :root[data-ui="apple"] .hourglass { background: rgba(0, 113, 227, .1); color: var(--a-link); box-shadow: none; } :root[data-ui="apple"] .signup-dots span { border: 0; background: var(--a-fill); color: var(--a-grey); } :root[data-ui="apple"] .signup-dots .on { background: rgba(0, 113, 227, .12); color: var(--a-link); } :root[data-ui="apple"] .signup-dots .on i, :root[data-ui="apple"] .signup-dots .done i { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .step-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; } :root[data-ui="apple"] .step-sub { color: var(--a-grey); } :root[data-ui="apple"] .admin-toolbar { background: #fff; } :root[data-ui="apple"] .admin-group-head { border-radius: 10px; background: #f2f2f7; } /* cartes de la liste */ :root[data-ui="apple"] .game-card, :root[data-ui="apple"] .home-poll, :root[data-ui="apple"] .foryou-start { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .05); } :root[data-ui="apple"] .game-card:hover, :root[data-ui="apple"] .foryou-start:hover:not(:disabled) { background-color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .05); } :root[data-ui="apple"] .foryou-start:disabled { opacity: 1; } :root[data-ui="apple"] .foryou-start small, :root[data-ui="apple"] .gc-title small, :root[data-ui="apple"] .games-hint, :root[data-ui="apple"] .gc-empty { color: var(--a-grey); } :root[data-ui="apple"] .gc-ico { border-radius: 10px; background: #f2f2f7; box-shadow: none; } :root[data-ui="apple"] .gc-play { border-radius: 999px; background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .foryou-start .fy-ico { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .reel-card { border: 0; border-radius: 12px; } :root[data-ui="apple"] .home-poll .poll-opt { border-radius: 8px; } :root[data-ui="apple"] .board li.me .who { color: var(--a-link); } /* connexion : comme une page d'Apple (grand titre, texte gris, cartes grises), formulaire dans une carte */ :root[data-ui="apple"] .auth { background: #fff; } :root[data-ui="apple"] .auth-aside .auth-title { font-family: var(--font-display); font-size: clamp(48px, 5.6vw, 80px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; } :root[data-ui="apple"] .auth-aside .auth-title em { color: #6e6e73; } :root[data-ui="apple"] .auth-aside > p { color: var(--a-grey-2); font-size: 21px; line-height: 1.45; letter-spacing: -.01em; } :root[data-ui="apple"] .auth-points li { padding: 20px; border: 0; border-radius: 18px; background: #f5f5f7; box-shadow: none; } :root[data-ui="apple"] .auth-points li > span { background: #fff; color: var(--a-link); box-shadow: var(--shadow-sm); } :root[data-ui="apple"] .auth-points b { font-size: 15px; } :root[data-ui="apple"] .auth-points small { color: var(--a-grey); } :root[data-ui="apple"] .auth-card { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 30px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .06); } :root[data-ui="apple"] .auth h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; } :root[data-ui="apple"] .auth-sub { color: var(--a-grey); } :root[data-ui="apple"] .auth-form .btn { min-height: 48px; border-radius: 12px; font-size: 17px; } :root[data-ui="apple"] .auth-error { color: var(--a-red-text); } /* écrans à part */ :root[data-ui="apple"] .history { border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); } :root[data-ui="apple"] .history-head { border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--a-hairline); } :root[data-ui="apple"] .history-bar { border-top: 0; background: #f2f2f7; } /* sélecteur de thème */ :root[data-ui="apple"] .theme-card { border: 0; border-radius: 14px; background: #f2f2f7; } :root[data-ui="apple"] .theme-card[aria-checked="true"] { background: rgba(0, 113, 227, .08); box-shadow: inset 0 0 0 2px var(--a-blue); } :root[data-ui="apple"] .theme-card:hover { border-color: transparent; } :root[data-ui="apple"] .theme-text small { color: var(--a-grey); } :root[data-ui="apple"] .theme-card[aria-checked="true"] .theme-check { background: var(--a-blue); color: #fff; } /* thèmes clairs (Windows 95 et Apple) : couleurs de l'ancienne feuille écrites pour un fond sombre */ :root:is([data-ui="win95"], [data-ui="apple"]) .duo .avatar:last-child:not(:first-child) { box-shadow: 0 0 0 2px #fff; } :root:is([data-ui="win95"], [data-ui="apple"]) .avatar.is-live { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e0002a; animation: none; } :root:is([data-ui="win95"], [data-ui="apple"]) .pk-dex-stats .bar { background: rgba(0, 0, 0, .12); } :root:is([data-ui="win95"], [data-ui="apple"]) .tick.read { color: var(--accent-text); filter: none; } :root:is([data-ui="win95"], [data-ui="apple"]) .msg.out .tick.read { color: var(--on-grad-tick); } :root:is([data-ui="win95"], [data-ui="apple"]) .conv.active .conv-preview .tick.read { color: #fff; } :root:is([data-ui="win95"], [data-ui="apple"]) .bubble.skin-capy:not(.skinned) .capy-bg { --capy-line: rgba(0, 0, 0, .22); --capy-shade: #000; } :root:is([data-ui="win95"], [data-ui="apple"]) .bubble.skin-capy:not(.skinned) .capy-bg .c-dark { fill: #3c3c43; } :root:is([data-ui="win95"], [data-ui="apple"]) .bubble.skin-capy:not(.skinned) .capy-bg .c-mouth { stroke: #3c3c43; } /* bulles illustrées : leurs marges et leur place autour de l'animal priment sur celles des bulles du thème */ :root:is([data-ui="win95"], [data-ui="apple"]) .messages { overflow-x: hidden; } /* (pattes et queues qui dépassent des bulles : pas de défilement de côté) */ :root:is([data-ui="win95"], [data-ui="apple"]) :is(.msg.sk-capy, .msg.sk-sausage, .msg.sk-dog) + .msg:not([class*="sk-"]) { margin-top: 16px; } /* (sous les pattes) */ :root:is([data-ui="win95"], [data-ui="apple"]) .msg .bubble.skin-capy { padding-left: 50px; padding-right: 12px; } :root:is([data-ui="win95"], [data-ui="apple"]) .msg.in .bubble.skin-capy { padding-left: 12px; padding-right: 50px; } :root:is([data-ui="win95"], [data-ui="apple"]) .msg .bubble.skinned .quote, :root:is([data-ui="win95"], [data-ui="apple"]) .msg .bubble.skinned .quote * { color: var(--sk-fg); } :root:is([data-ui="win95"], [data-ui="apple"]) .msg.out .bubble.skin-capy:not(.skinned) { color: #000; --on-grad: #000; --on-grad-meta: #3c3c43; --on-grad-faint: rgba(0, 0, 0, .15); --on-grad-tick: var(--accent-text); } /* tablette : la barre garde son contrôle segmenté (sur une 2e ligne), pas de menu plein écran */ @media (min-width: 761px) and (max-width: 1023px) { :root[data-ui="apple"] .nav-toggle { display: none; } :root[data-ui="apple"] .topbar-inner { flex-wrap: wrap; height: auto; padding: 0 12px 10px 16px; } :root[data-ui="apple"] .topbar .brand { height: 52px; } :root[data-ui="apple"] .side-tabs { position: static; inset: auto; order: 3; flex: 0 1 auto; width: auto; height: 32px; margin: 0 auto; padding: 2px; flex-direction: row; justify-content: center; overflow-x: auto; visibility: visible; opacity: 1; pointer-events: auto; border-radius: 9px; background: var(--a-fill); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; } :root[data-ui="apple"] .side-tabs button { height: 28px; padding: 0 10px; font-size: 13px; letter-spacing: 0; border-radius: 7px; } :root[data-ui="apple"] .side-tabs [data-tab="groups"] { margin: 0 0 0 6px; } :root[data-ui="apple"] .side-tabs .tab-count { position: static; min-width: 17px; height: 17px; font-size: 10.5px; } } /* téléphone : iOS — grand titre, liste blanche à séparateurs, barre d'onglets en bas */ @media (max-width: 760px) { :root[data-ui="apple"] .layout { padding: 0; gap: 0; } :root[data-ui="apple"] .topbar { margin: 0; padding-top: env(safe-area-inset-top); } :root[data-ui="apple"] .topbar::before { background: rgba(249, 249, 249, .94); } :root[data-ui="apple"] .topbar-inner { height: 56px; padding: 0 6px 0 16px; } :root[data-ui="apple"] .topbar .brand { gap: 10px; } :root[data-ui="apple"] .topbar .brand-text { font-size: 28px; font-weight: 800; letter-spacing: -.025em; } :root[data-ui="apple"] .topbar .brand .logo { width: 30px; height: 30px; } :root[data-ui="apple"] .side-tabs, :root[data-ui="apple"] .side-tabs:has(.admin-tab:not([hidden])) { left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; margin: 0; padding: 4px 4px calc(env(safe-area-inset-bottom) + 2px); justify-content: space-around; gap: 0; border-radius: 0; background: rgba(249, 249, 249, .94); -webkit-backdrop-filter: var(--a-blur); backdrop-filter: var(--a-blur); box-shadow: inset 0 .5px 0 var(--a-hairline); } :root[data-ui="apple"] .side-tabs button, :root[data-ui="apple"] .side-tabs:has(.admin-tab:not([hidden])) button { flex: 1 1 0; min-width: 0; height: 49px; padding: 0; gap: 2px; border-radius: 0; background: none; box-shadow: none; color: var(--a-grey-2); font-size: 10px; font-weight: 500; letter-spacing: .01em; } :root[data-ui="apple"] .side-tabs button::before { display: block; width: 26px; height: 26px; } :root[data-ui="apple"] .side-tabs:has(.admin-tab:not([hidden])) button { font-size: 0; } :root[data-ui="apple"] .side-tabs button:active { transform: none; opacity: .6; } :root[data-ui="apple"] .side-tabs button[aria-selected="true"], :root[data-ui="apple"] .side-tabs:has(.admin-tab:not([hidden])) button[aria-selected="true"] { color: var(--a-link); font-weight: 600; background: none; box-shadow: none; } :root[data-ui="apple"] .side-tabs [data-tab="groups"] { margin: 0; } :root[data-ui="apple"] .side-tabs .tab-count { top: 2px; box-shadow: none; } :root[data-ui="apple"] .side-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 62px); } :root[data-ui="apple"] .layout:not(.in-chat):not([hidden]) ~ .toast { bottom: calc(env(safe-area-inset-bottom) + 70px); } :root[data-ui="apple"] .sidebar { border: 0; border-radius: 0; background: #fff; } :root[data-ui="apple"] .search { padding: 8px 16px; } :root[data-ui="apple"] .search svg { left: 26px; } :root[data-ui="apple"] .install-bar { margin: 0 16px 10px; background: #f2f2f7; box-shadow: none; } :root[data-ui="apple"] .story-ring .avatar, :root[data-ui="apple"] .story-plus { border-color: #fff; } :root[data-ui="apple"] .conv-list { padding: 0 0 12px; } :root[data-ui="apple"] .conv { gap: 12px; margin: 0; padding: 10px 16px; border-radius: 0; } :root[data-ui="apple"] .conv + .conv::after { content: ""; position: absolute; top: 0; left: 76px; right: 0; height: .5px; background: var(--a-hairline); } :root[data-ui="apple"] .conv.active, :root[data-ui="apple"] .conv.active:hover { background: none; } :root[data-ui="apple"] .conv.active :is(.conv-name, .conv-time, .conv-preview, .conv-preview .txt, .conv-preview .tick) { color: inherit; } :root[data-ui="apple"] .conv.active .conv-time, :root[data-ui="apple"] .conv.active .conv-preview, :root[data-ui="apple"] .conv.active .conv-preview .txt { color: var(--a-grey); } :root[data-ui="apple"] .conv.active .badge { background: var(--a-blue); color: #fff; } :root[data-ui="apple"] .conv .avatar { width: 50px; height: 50px; font-size: 18px; } :root[data-ui="apple"] .conv-name { font-size: 17px; } :root[data-ui="apple"] .conv-preview { font-size: 15px; } :root[data-ui="apple"] .conv-time { font-size: 15px; } :root[data-ui="apple"] .chat { background: #fff; } :root[data-ui="apple"] .chat-head { min-height: 68px; height: auto; padding: env(safe-area-inset-top) 6px 0 2px; } :root[data-ui="apple"] .chat-title { top: env(safe-area-inset-top); height: 68px; max-width: 56%; } :root[data-ui="apple"] .chat-head .back { color: var(--a-link); } :root[data-ui="apple"] .chat-head .back svg { width: 26px; height: 26px; stroke-width: 2.2; } :root[data-ui="apple"] .messages { padding: 12px 12px 8px; } :root[data-ui="apple"] .text { font-size: 17px; line-height: 22px; } :root[data-ui="apple"] .bubble { max-width: 78%; } :root[data-ui="apple"] .composer-wrap { margin: 0; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); border-radius: 0; } :root[data-ui="apple"] .composer textarea { font-size: 17px; } :root[data-ui="apple"] .modal { border-radius: 12px 12px 0 0; } :root[data-ui="apple"] .modal::before { content: ""; flex: none; width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: rgba(60, 60, 67, .3); } :root[data-ui="apple"] .panel { background-color: #f2f2f7; box-shadow: none; } :root[data-ui="apple"] .panel-head { padding-top: env(safe-area-inset-top); } :root[data-ui="apple"] .auth { background: #fff; } :root[data-ui="apple"] .auth-card { border-radius: 18px; box-shadow: none; } }