:root { color-scheme: dark; /* Surfaces « noir chaud quasi-OLED » alignées sur l'app Android (Color.kt : Ink/InkElevated/InkTile/InkOutline) — neutres légèrement chaudes, échelonnées bg < bg-soft < card. L'accent reste personnalisable (caméléon) ; seules les surfaces sont fixes, comme sur Android (« pas de Material You »). */ --bg: #0b0c0b; --bg-soft: #141614; --card: #1b1e1b; --line: #2a2e2b; --fg: #ecefec; --muted: #8c938c; /* Accent par défaut : Indigo Teams (le sélecteur caméléon permet d'en changer). */ --accent: #8b8ff5; --accent-strong: #6f74ee; --danger: #f0717a; --radius: 14px; --maxw: 460px; /* Surfaces enfoncées (champs, puces) — variabilisées pour le thème clair */ --inset: #0a0b0a; --chip: #20231f; /* Échelle d'élévation (ombres) — façon Fluent/Teams : 1=repos, 2=survol, 3=flottant. Sur fond sombre, ombres noires franches ; adoucies en clair (cf. data-theme). */ --elev-1: 0 1px 2px rgba(0, 0, 0, .32); --elev-2: 0 6px 16px -6px rgba(0, 0, 0, .48); --elev-3: 0 18px 44px -12px rgba(0, 0, 0, .58); /* Accents dérivés (suivent la palette caméléon via color-mix) : --accent-ink = accent utilisé comme TEXTE/icône (assez foncé pour le contraste) --accent-soft = fond teinté léger (puces, halos) --accent-line = bordure teintée --on-accent = texte posé SUR un fond accent (pastel) */ --accent-ink: var(--accent); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 42%, transparent); --on-accent: #0b0d12; /* Vert sémantique (statuts « en ligne / public / ami / libre / ok ») */ --success: #7fdca0; /* Indice de débordement (scroll-shadows). Sur fond sombre, une ombre noire est invisible → on utilise une teinte CLAIRE (léger halo au bord scrollable). */ --scroll-shadow: rgba(255, 255, 255, .14); /* ===================== v3 2026 — langage visuel ====================== Couche de tokens ajoutée pour la refonte : typographie affirmée, hiérarchie de texte à 3 niveaux (fg / fg-soft / muted), reliefs de profondeur (hairline + liseré lumineux) et mouvement « spring ». */ /* Texte secondaire à contraste renforcé : entre --fg et --muted. */ --fg-soft: #b9bfb8; /* Échelle typographique en rem (plancher 12px = pas de texte plus petit). */ --t-2xs: 0.75rem; /* 12px — légendes, badges, libellés de nav */ --t-xs: 0.8125rem; /* 13px */ --t-sm: 0.875rem; /* 14px */ --t-base: 1rem; /* 16px — corps */ --t-md: 1.125rem; /* 18px */ --t-lg: 1.375rem; /* 22px */ --t-xl: 1.75rem; /* 28px */ --t-2xl: 2.25rem; /* 36px — grands titres */ /* Reliefs : filet stable en thème + liseré lumineux en haut des surfaces. */ --hairline: color-mix(in srgb, var(--fg) 13%, transparent); --highlight: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); /* Police mono — signature « identité + dev tool » : @handles, clé, numéros, blocs de config MCP. Utilise JetBrains/Geist Mono si présents, sinon repli système (aucun webfont chargé → zéro coût perf). */ --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Mouvement unifié : sortie « décélérée », ressort discret, durées étagées. */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 340ms; /* ── Bulles de chat (style WhatsApp) ── */ --bbl-theirs: #1e2b31; --bbl-theirs-fg: #d0d8db; --bbl-meta: rgba(255,255,255,.52); --bbl-ticks-read: #53bdeb; } /* Mode clair — bascule via data-theme="light" sur */ :root[data-theme="light"] { color-scheme: light; --bbl-theirs: #ffffff; --bbl-theirs-fg: #111b21; --bbl-meta: rgba(0,0,0,.45); --bbl-ticks-read: #25a489; /* Surfaces lavande très désaturées (clair) — pendant doux du blue-black sombre. */ --bg: #f3f4fb; --bg-soft: #e9ebf6; --card: #ffffff; --line: #dde0ef; --fg: #1b2030; --muted: #5d6675; --danger: #d6454e; --inset: #eef0fa; --chip: #e7eaf7; /* Élévation adoucie en clair : ombres bleutées légères (jamais noir pur). */ --elev-1: 0 1px 2px rgba(20, 28, 60, .08); --elev-2: 0 6px 16px -6px rgba(20, 28, 60, .14); --elev-3: 0 18px 44px -12px rgba(20, 28, 60, .20); /* En clair, on assombrit l'accent pour le texte (les pastels passent ~2.3:1 sur blanc → illisibles). Mix vers un encre sombre → contraste ≥ 4.5:1 tout en gardant la teinte choisie (suit la palette caméléon). */ --accent-ink: color-mix(in srgb, var(--accent) 52%, #131a2b); --accent-soft: color-mix(in srgb, var(--accent) 18%, #ffffff); --accent-line: color-mix(in srgb, var(--accent) 50%, #ffffff); /* Le vert pastel sombre devient illisible sur blanc → vert profond (≈5:1). */ --success: #0e7048; /* En clair, l'ombre de débordement classique (noir translucide) fonctionne. */ --scroll-shadow: rgba(0, 0, 0, .20); /* v3 : texte secondaire lisible sur fond clair ; liseré lumineux quasi nul (les surfaces claires se distinguent par l'ombre, pas par un highlight). */ --fg-soft: #495061; --highlight: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); } * { box-sizing: border-box; } /* garde-fou horizontal : `clip` (et non `hidden`) — `hidden` force overflow-y:auto, ce qui crée un conteneur de défilement et casse `position: sticky` (barre d'ancres). */ html, body { overflow-x: clip; max-width: 100%; } html { scroll-behavior: smooth; } /* Trois teintes ENREGISTRÉES comme : @property les rend interpolables, donc animables en douceur (impossible avec des custom props ordinaires). Elles cyclent une palette caméléon → les halos changent lentement de couleur. */ @property --h1 { syntax: ""; inherits: false; initial-value: #8b5cf6; } @property --h2 { syntax: ""; inherits: false; initial-value: #43b58f; } @property --h3 { syntax: ""; inherits: false; initial-value: #6366f1; } /* Fond ambiant fixe, sous tout le contenu. Halos radiaux teintés par --h1..3, + vignette. `fixed` (reste en place au défilement), `pointer-events:none`. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 18% 12%, color-mix(in srgb, var(--h1) 42%, transparent), transparent 55%), radial-gradient(65% 60% at 88% 22%, color-mix(in srgb, var(--h2) 34%, transparent), transparent 55%), radial-gradient(85% 75% at 60% 105%, color-mix(in srgb, var(--h3) 34%, transparent), transparent 60%), radial-gradient(130% 120% at 50% 45%, transparent 52%, color-mix(in srgb, #000 55%, transparent) 100%); animation: hue-cycle 32s ease-in-out infinite; } /* Thème clair : mêmes halos, atténués (le fond lavande est déjà lumineux). */ :root[data-theme="light"] body::before { opacity: .62; } @keyframes hue-cycle { 0%,100% { --h1: #8b5cf6; --h2: #43b58f; --h3: #6366f1; } /* violet · vert Milo · indigo */ 20% { --h1: #6366f1; --h2: #22c3a6; --h3: #a855f7; } /* indigo · teal · pourpre */ 40% { --h1: #22c3a6; --h2: #f472b6; --h3: #8b5cf6; } /* teal · rose · violet */ 60% { --h1: #eab308; --h2: #8b5cf6; --h3: #43b58f; } /* ambre · violet · vert */ 80% { --h1: #f472b6; --h2: #6366f1; --h3: #22c3a6; } /* rose · indigo · teal */ } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; background: var(--bg); color: var(--fg); /* v3 : corps à 16px (évite le zoom auto iOS), interligne plus aéré, léger resserrement de l'interlettrage pour un rendu plus net façon 2026. */ font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent-ink); } /* Bouton « caméléon » — marque visuelle des actions d'authentification mindlog.id : un dégradé multicolore qui glisse lentement, en écho au caméléon Milo qui change de couleur. Respecte prefers-reduced-motion. */ .btn.primary.chameleon, .btn.chameleon { color: #fff; border: none; background: linear-gradient(100deg, #8b5cf6, #6366f1, #22c3a6, #43b58f, #eab308, #f472b6, #a855f7, #8b5cf6); background-size: 280% 100%; animation: chameleon-shift 9s ease-in-out infinite; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent); } .btn.primary.chameleon:hover, .btn.chameleon:hover { filter: brightness(1.06) saturate(1.08); background-position: 100% 50%; border-color: transparent; } .btn.primary.chameleon .icon, .btn.chameleon .icon { color: #fff; } /* Footer de l'écran d'auth : version + crédit le-lab.net, discret, en bas. */ [data-view="auth"] .app-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; align-items: center; padding: .9rem 1rem; font-size: .82rem; color: var(--muted); } [data-view="auth"] .app-foot .sep { opacity: .5; } [data-view="auth"] .app-foot a { color: color-mix(in srgb, var(--accent) 68%, var(--fg)); text-decoration: none; } [data-view="auth"] .app-foot a:hover { text-decoration: underline; } /* ── Écran de connexion — refonte « soignée » ────────────────────────────── Backdrop caméléon cohérent (glows haut/bas qui ENCADRENT la carte, plus de halos épars « vides »), carte glass nettement détachée du fond, logo en pastille circulaire avec halo propre. */ #app[data-view="auth"] { position: relative; overflow: hidden; background: var(--bg); padding: 1.25rem; } /* Backdrop animé en ::before (même recette éprouvée que body::before : anime --h1..3 via hue-cycle → les dégradés changent de couleurs). */ #app[data-view="auth"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(115% 70% at 50% -8%, color-mix(in srgb, var(--h1, #8b5cf6) 42%, transparent), transparent 62%), radial-gradient(120% 75% at 50% 108%, color-mix(in srgb, var(--h2, #43b58f) 36%, transparent), transparent 62%), radial-gradient(90% 60% at 88% 52%, color-mix(in srgb, var(--h3, #6366f1) 30%, transparent), transparent 60%); animation: hue-cycle 24s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { #app[data-view="auth"]::before { animation: none; } } /* Sans carte : le contenu flotte directement sur le backdrop ambiant (le « gros rectangle gris » ne servait à rien sur un fond déjà travaillé). */ [data-view="auth"] .auth-card { position: relative; z-index: 1; width: 100%; max-width: 360px; margin: auto; padding: 1.5rem 1.25rem; text-align: center; } /* Logo : pastille ronde surélevée + ANNEAU dégradé net (masque radial → un vrai cercle, pas le « diamant » d'un conic-gradient flouté) + glow violet doux. */ .auth-logo { position: relative; width: 112px; height: 96px; margin: 0 auto 1rem; display: grid; place-items: center; } .auth-logo svg { position: relative; z-index: 1; width: 84px; height: 84px; overflow: visible; } /* Glow radial (circulaire par nature → aucun artefact anguleux), doux et pulsé. */ .auth-logo-ring { position: absolute; inset: -16px; z-index: 0; border-radius: 50%; background: radial-gradient(circle at 42% 40%, color-mix(in srgb, var(--h1, #8b5cf6) 60%, transparent), transparent 62%), radial-gradient(circle at 62% 66%, color-mix(in srgb, var(--h2, #43b58f) 48%, transparent), transparent 62%); filter: blur(11px); animation: auth-glow-pulse 4.5s ease-in-out infinite; } @keyframes auth-glow-pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } } .auth-title { margin: 0 0 .4rem; font-size: 1.72rem; font-weight: 800; letter-spacing: -.015em; } .auth-title b { color: var(--accent-ink); } .auth-tagline { margin: 0 auto 1.6rem; max-width: 19rem; font-size: .92rem; line-height: 1.55; color: var(--muted); } .auth-actions { display: flex; flex-direction: column; gap: .55rem; } .auth-actions .btn { min-height: 48px; font-size: .96rem; border-radius: 14px; } @media (prefers-reduced-motion: reduce) { .auth-logo-ring { animation: none; } } @keyframes chameleon-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .btn.primary.chameleon, .btn.chameleon { animation: none; background-position: 30% 50%; } } #app { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; } #app[data-view="private"] { justify-content: center; } /* Page identité : en-tête collant tout en haut, contenu centré horizontalement ET verticalement. #app remplit déjà la hauteur (body 100dvh, flex:1) ; le header garde sa place en haut, .pub-page absorbe l'espace restant via des marges auto (→ centrage vertical ; se réduit à 0 si le contenu déborde). */ #app[data-view="profile"] { justify-content: flex-start; } #app[data-view="profile"] .pub-page { margin-block: auto; } /* Nouvelle vue héro : full-width, pas de max-width ni de centrage vertical */ #app[data-view="profile"]:has(.pub-hero-page) { align-items: stretch; } #app[data-view="profile"] .pub-hero-page { margin: 0; padding: 0; width: 100%; } /* ── Le topbar est un frère de #app (hors du #app) ; on cible depuis body. En vue profil-héro : le header flotte en overlay absolu sur le héro, libérant toute la hauteur viewport pour la couverture. ── */ body:has(#app[data-view="profile"] .pub-hero-page) { /* Contexte de positionnement pour que position:absolute du header se réfère bien au coin haut-gauche de la page. */ position: relative; } /* Profil hero : topbar standard visible en overlay fixe sur la photo de couverture. Remplace les glass buttons top-left/top-right pour une continuité visuelle avec l'app connectée (logo Milo + recherche + chip @handle). */ body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 200; background: linear-gradient(to bottom, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 70%, transparent 100%) !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Texte et icônes de la barre : blancs sur fond photo */ body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .brand, body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .brand-text, body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .btn, body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .profile-chip { color: #fff; } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .profile-chip { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header input { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header input::placeholder { color: rgba(255,255,255,.55); } /* Glass overlay buttons supprimés : la barre standard les remplace */ body:has(#app[data-view="profile"] .pub-hero-page) .pub-cover-top-left, body:has(#app[data-view="profile"] .pub-hero-page) .pub-cover-top { display: none !important; } /* Boutons « Retour » et « Créer ma page » dans la topbar du profil public : icône + label, version pill arrondie en desktop, cercle icône en mobile (cf. media query plus bas). */ .pub-back-btn, .pub-create-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem .35rem .55rem !important; border-radius: 999px !important; } .pub-back-btn svg, .pub-create-cta svg { flex: none; } /* ============================== Mascotte Milo ============================== */ .milo { display: block; overflow: visible; } .milo-body { fill: #43b58f; stroke: #2c7d63; stroke-width: 2.5; } .milo-head { fill: #50c79c; stroke: #2c7d63; stroke-width: 2.5; } .milo-belly { fill: #7fdcc0; } .milo-crest { stroke: var(--accent); stroke-width: 4; fill: none; } .milo-cheek { fill: var(--accent); opacity: .3; } .milo-eyeball { fill: #f4f8ff; } .milo-iris { fill: var(--accent); } .milo-pupil { fill: #10141d; } .milo-shine { fill: #ffffff; } .milo-mouth { stroke: #1f5546; stroke-width: 3; fill: none; } .milo-leg { stroke: #3aa17e; stroke-width: 7; fill: none; } .milo-branch { stroke: #5a6a4a; stroke-width: 5; } .milo-tail { stroke: #43b58f; stroke-width: 8; fill: none; } .milo-look { transition: transform .08s linear; } .hero-milo { display: flex; justify-content: center; margin-bottom: .25rem; } .empty-milo { display: flex; justify-content: center; margin: .25rem auto 1rem; } /* Scène + bulle de dialogue */ .milo-stage { position: relative; display: inline-block; } .milo-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; background: #eef2fb; color: #10141d; padding: .5rem .8rem; border-radius: var(--r-md); font-size: .85rem; font-weight: 500; text-align: center; max-width: 240px; white-space: normal; line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 2; } .milo-bubble[hidden] { display: none; } .milo-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #eef2fb; } /* Mascotte fixe (coin), visible au scroll */ #milo-fab { position: fixed; top: 62px; right: 16px; width: 76px; z-index: 90; } #milo-fab .milo-stage { cursor: pointer; } #milo-fab .milo-bubble { left: auto; right: calc(100% + 6px); bottom: auto; top: 6px; transform: none; margin: 0; max-width: 210px; } #milo-fab .milo-bubble::after { top: 16px; left: 100%; transform: none; border: 7px solid transparent; border-left-color: #eef2fb; } .milo-palette { position: absolute; top: calc(100% + 6px); right: 0; display: flex; gap: .4rem; padding: .5rem .6rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s, transform .2s; } .milo-palette { align-items: center; } .milo-palette.show { opacity: 1; pointer-events: auto; transform: none; } /* Croix de fermeture du sélecteur de couleur (palette de la marque). */ .brand-palette-close { width: 22px; height: 22px; flex: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; border-radius: 50%; background: var(--inset); border: 1px solid var(--line); color: var(--muted); margin-left: .15rem; transition: transform .12s, color .12s, border-color .12s; } .brand-palette-close:hover { transform: scale(1.12); color: var(--fg); border-color: var(--accent-ink); } .theme-toggle { width: 24px; height: 24px; flex: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; border-radius: 50%; background: var(--inset); border: 1px solid var(--line); color: var(--fg); margin-left: .25rem; transition: transform .12s, border-color .12s; border-left-width: 1px; } .theme-toggle:hover { transform: scale(1.12); border-color: var(--accent-ink); } /* Icône SVG (soleil/lune) — plus d'emoji : taille pilotée par le bouton. */ .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle-fixed svg { width: 20px; height: 20px; } .theme-toggle-header svg { width: 17px; height: 17px; } .theme-toggle-fixed { position: fixed; right: 16px; top: 16px; z-index: 90; width: 44px; height: 44px; background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,.3); } .theme-toggle-fixed:hover { transform: scale(1.08); } @media (max-width: 600px) { .theme-toggle-fixed { width: 40px; height: 40px; right: 12px; top: 12px; } } /* Bascule de thème INTÉGRÉE à la barre (vue connectée) : alignée sur la cloche, même gabarit que les boutons .btn.sm — pas de bouton flottant qui « pend ». */ .theme-toggle-header { width: 34px; height: 34px; margin-left: 0; font-size: 1rem; border-radius: var(--r-md); background: var(--bg-soft); border: 1px solid var(--line); } .theme-toggle-header:hover { transform: none; background: var(--chip); border-color: var(--accent-ink); } /* Masqué là où la bascule vit déjà dans la barre (landing + vue connectée). Conservé sur /status & invite, qui n'ont pas de toggle intégré au header. */ #app[data-view="landing"] ~ .theme-toggle-fixed, #app[data-view="private"] ~ .theme-toggle-fixed, #app[data-view="private"] .theme-toggle-fixed, #app[data-view="profile"] ~ .theme-toggle-fixed, #app[data-view="profile"] .theme-toggle-fixed { display: none; } @media (max-width: 600px) { #milo-fab { width: 60px; top: 56px; right: 10px; } #milo-fab .milo-bubble { display: none; } } /* Palette (rangée) */ .palette { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 1.25rem; } .palette-label { font-size: .8rem; color: var(--muted); margin-right: .15rem; } .swatch { width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--sw); border: 2px solid var(--line); transition: transform .12s, border-color .12s; } .swatch:hover { transform: scale(1.18); } .swatch.active { border-color: var(--fg); box-shadow: 0 0 0 2px var(--sw); } /* Page Statut */ .status { width: 100%; max-width: 680px; margin: 2rem auto; padding: 0 1.25rem; } .status-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .status-head h1 { margin: 0; font-size: 1.5rem; } .status-badge { font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; } .status-badge.up { color: var(--success); background: rgba(127,220,160,.12); border: 1px solid rgba(127,220,160,.4); } .status-badge.down { color: var(--danger); background: rgba(240,113,122,.12); border: 1px solid rgba(240,113,122,.4); } .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .status-card { display: flex; align-items: center; gap: .7rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1rem; } .status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .status-card.up .status-dot { background: #7fdca0; box-shadow: 0 0 0 4px rgba(127,220,160,.18); } .status-card.down .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(240,113,122,.18); } .status-name { font-weight: 500; } .status-state { color: var(--muted); font-size: .82rem; } .status-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: .75rem; margin-top: .2rem; } .metric { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; text-align: center; } .metric b { display: block; font-size: 1.5rem; color: var(--accent-ink); } .metric span { color: var(--muted); font-size: .8rem; } .status-meta { color: var(--muted); font-size: .82rem; margin-top: 1.25rem; text-align: center; } /* ============================== Wordmark ============================== */ .brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--fg); } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .brand-milo { display: inline-flex; width: 44px; height: 44px; flex: none; cursor: pointer; } .brand-milo .milo { width: 44px; height: 44px; overflow: visible; } .brand-palette { position: absolute; right: auto; z-index: 200; } .topbar { width: 100%; max-width: 960px; padding: 1.25rem 1.25rem 0; display: flex; justify-content: space-between; align-items: center; } /* Bandeau « Mise à jour disponible » — frère en flux avant #app (body en flex colonne, centré → width:100% pour occuper toute la largeur). Pousse l'app vers le bas sans recouvrement, survit aux re-renders de #app. */ .update-banner { width: 100%; box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; padding: .5rem 1rem; z-index: 500; background: var(--accent); color: #0b0d12; font-size: .88rem; font-weight: 600; } .update-banner-text { display: inline-flex; align-items: center; gap: .4rem; } .update-banner svg { color: #0b0d12; flex: none; } .update-banner .btn.sm { background: #0b0d12; color: var(--accent); border-color: transparent; flex: none; } .update-banner .btn.sm:hover { opacity: .9; } /* ============================== Landing ============================== */ .hero { width: 100%; max-width: 720px; padding: 3.5rem 1.25rem 1rem; text-align: center; } .hero h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.05; margin: 0 0 1rem; letter-spacing: -.03em; } .hero h1 .accent { color: var(--accent-ink); } .hero p.lead { color: var(--muted); font-size: 1.1rem; max-width: 34rem; margin: 0 auto 2rem; } /* Recherche : le CTA principal du pattern annuaire */ .search { position: relative; max-width: 520px; margin: 0 auto; } .search-box { display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .25rem .15rem 1rem; transition: border-color .15s, box-shadow .15s; } .search-box:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); } .search-box svg { color: var(--muted); flex: none; } .search-box input { flex: 1; border: none; background: none; color: var(--fg); font-size: 1rem; padding: .7rem 0; } .search-box input:focus { outline: none; } .search-box .go { border: none; background: var(--accent); color: #0b0d12; border-radius: 999px; padding: .6rem 1.1rem; font-weight: 600; cursor: pointer; transition: background .15s; } .search-box .go:hover { background: var(--accent-strong); } .results { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-align: left; z-index: 20; } .result { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--line); transition: background .12s; } .result:last-child { border-bottom: none; } .result:hover, .result:focus { background: var(--bg-soft); outline: none; } .result .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--chip); flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted); } .result .meta { min-width: 0; } .result .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result .hd { color: var(--muted); font-size: .82rem; } .result .no { padding: .9rem; color: var(--muted); font-size: .9rem; } .hero-actions { margin-top: 1.5rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } /* Bloc « app mobile très prochainement » + badges stores, sous les actions du hero. */ .app-soon { margin: 1rem auto 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; } .app-soon-cap { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--accent-ink); } .app-soon-cap svg { flex: none; } .store-badges { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; } /* Badges au style officiel (sombre + logo blanc), conservé en thème clair. */ .store-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .85rem; border-radius: var(--r-md); background: #101216; color: #fff; border: 1px solid rgba(255, 255, 255, .18); text-decoration: none; transition: transform .15s ease, border-color .15s ease; } .store-badge:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .42); } .store-badge svg { flex: none; } .store-badge > span { display: flex; flex-direction: column; line-height: 1.12; text-align: left; } .store-badge small { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; opacity: .8; } .store-badge b { font-size: .92rem; font-weight: 600; } .store-badge.is-soon { opacity: .5; cursor: default; } .store-badge.is-soon:hover { transform: none; border-color: rgba(255, 255, 255, .18); } @media (prefers-reduced-motion: reduce) { .store-badge:hover { transform: none; } } /* Boutons génériques */ .btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--line); background: var(--chip); color: var(--fg); border-radius: var(--r-md); padding: .7rem 1.15rem; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, transform .1s; } .btn:hover { border-color: var(--accent-ink); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); color: #0b0d12; border-color: var(--accent-ink); font-weight: 600; } .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 600; } .btn.danger:hover { filter: brightness(1.08); } /* Popup de confirmation in-app */ .confirm-panel { max-width: 380px; } .confirm-msg { margin: 0 0 1.25rem; font-size: 1rem; } /* promptDialog — saisie texte applicative (remplace prompt() du navigateur). */ .prompt-panel { max-width: 440px; } .prompt-msg { margin: 0 0 .85rem; font-size: 1rem; } .prompt-field { margin: 0 0 .5rem; } .prompt-field input, .prompt-field textarea { width: 100%; box-sizing: border-box; padding: .55rem .75rem; background: var(--inset); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; } .prompt-field textarea { resize: vertical; min-height: 4.5rem; font-family: inherit; } .prompt-err { margin: 0 0 .75rem; color: var(--danger); font-size: .85rem; min-height: 1.1rem; } /* Section features */ /* Grille bento : 4 colonnes, tuiles de tailles variées (asymétrie type Apple). Les nouveautés privacy/comms (P2P, chiffrement multi-appareil) sont mises en avant en grandes tuiles teintées ; relations & confidentialité en demi-largeur. */ .features { width: 100%; max-width: 880px; padding: 3rem 1.25rem 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; align-content: center; } .feature { position: relative; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .feature:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .feature .ic { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: .9rem; } .feature h3 { margin: 0 0 .4rem; font-size: 1rem; } .feature p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; } /* Tuiles larges (demi-rangée) : relations, confidentialité. */ .feature--wide { grid-column: span 2; } /* Tuiles vedettes (demi-rangée, teintées) : messagerie P2P + chiffrement multi-appareil. */ .feature--hl { grid-column: span 2; background: radial-gradient(120% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--bg-soft); border-color: var(--accent-line); } .feature--hl .ic { width: 44px; height: 44px; border-radius: var(--r-md); } .feature--hl h3 { font-size: 1.14rem; } .feature--hl p { color: var(--fg); opacity: .82; } /* ≤ 768px : 2 colonnes, les grandes tuiles occupent toute la largeur. */ @media (max-width: 768px) { .features { grid-template-columns: repeat(2, 1fr); } .feature--hl, .feature--wide { grid-column: span 2; } } /* ≤ 460px : pile sur une colonne. */ @media (max-width: 460px) { .features { grid-template-columns: 1fr; } .feature--hl, .feature--wide { grid-column: span 1; } } @media (prefers-reduced-motion: reduce) { .feature { transition: border-color .2s ease; } .feature:hover { transform: none; box-shadow: none; } } /* ---- Colonne Souveraineté : piliers + comparatif ---- */ .sovereign { width: 100%; max-width: 880px; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .sov-head { display: flex; align-items: center; gap: .6rem; } .sov-head .ic { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); } .sov-head h2 { margin: 0; font-size: 1.4rem; } .sov-lead { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; max-width: 46rem; } .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .7rem; } .pillar { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; } .pillar .pic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 1.05rem; margin-bottom: .55rem; } .pillar h3 { margin: 0 0 .25rem; font-size: .98rem; } .pillar p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; } .sov-cmp-h { margin: .4rem 0 0; font-size: 1rem; } .sov-tabs { display: flex; gap: .5rem; flex-wrap: wrap; } .sov-tab { padding: .45rem .9rem; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); border-radius: 999px; cursor: pointer; font: inherit; font-size: .85rem; transition: border-color .15s, background .15s, color .15s; } .sov-tab:hover { border-color: var(--accent-ink); } .sov-tab.active { background: var(--accent); color: #0b0d12; border-color: var(--accent-ink); font-weight: 600; } .sov-panel[hidden] { display: none; } .sov-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } .sov-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .82rem; } .sov-table th, .sov-table td { padding: .5rem .5rem; text-align: center; border-bottom: 1px solid var(--line); } .sov-table tbody tr:last-child th, .sov-table tbody tr:last-child td { border-bottom: 0; } .sov-table thead th { color: var(--muted); font-weight: 600; font-size: .72rem; line-height: 1.2; } .sov-table tbody th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; position: sticky; left: 0; background: var(--bg); color: var(--fg); } /* Colonne « mindlog » (1re colonne produit) mise en valeur. */ .sov-table thead th.me { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); } .sov-table td.me { background: var(--accent-soft); } .sov-table .ok { color: var(--success); font-weight: 700; } .sov-table .part { color: var(--fg); font-weight: 700; } .sov-table .no { color: var(--danger); font-weight: 700; } .sov-legend { margin: 0; color: var(--muted); font-size: .76rem; text-align: center; } .sov-cmp-note { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; opacity: .85; } /* ----------------------------- Démo (showcase) -------------------------- */ .showcase { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 1rem; } .show-head { display: flex; align-items: center; gap: .6rem; } .show-head h2 { margin: 0; font-size: 1.25rem; } .show-head .ic { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); } /* Onglets segmentés : une démo à la fois */ .show-tabs { display: flex; gap: .5rem; margin: .25rem 0 0; flex-wrap: wrap; } .show-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; transition: border-color .15s, background .15s, color .15s; } .show-tab:hover { border-color: var(--accent-ink); } .show-tab.active { background: var(--accent); color: #0b0d12; border-color: var(--accent-ink); font-weight: 600; } .show-tab svg { flex: none; } .show-stage { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; min-height: 360px; } .show-panel[hidden] { display: none; } .show-card-head { display: flex; align-items: center; gap: .5rem; color: var(--accent-ink); } .show-card-head h3 { margin: 0; font-size: 1.02rem; color: var(--fg); } .show-d { margin: .5rem 0 1rem; color: var(--muted); font-size: .9rem; line-height: 1.5; } /* Galerie : grille de tuiles colorées qui apparaissent en cascade */ .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .gal-tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 60% 52%), hsl(calc(var(--h) + 40deg) 58% 38%)); } .gal-like { position: absolute; left: .4rem; bottom: .4rem; font-size: .72rem; color: #fff; background: rgba(0,0,0,.32); padding: .1rem .4rem; border-radius: 999px; backdrop-filter: blur(2px); } .gal-like b { font-weight: 700; } /* Chat : mini « téléphone » + fil de bulles */ .phone { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .phone-bar { display: flex; justify-content: center; padding: .5rem; border-bottom: 1px solid var(--line); background: var(--bg-soft); } .phone-bar { gap: .4rem; } .e2e-badge { font-size: .72rem; color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); padding: .12rem .5rem; border-radius: 999px; } .ttl-badge { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); padding: .12rem .5rem; border-radius: 999px; } .thread { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; } .thread.ai { padding: .2rem 0; } .bubble { max-width: 82%; padding: .5rem .75rem; border-radius: var(--r-md); font-size: .9rem; line-height: 1.4; word-break: break-word; } .bubble.in { align-self: flex-start; background: var(--chip); color: var(--fg); border-bottom-left-radius: 5px; } .bubble.out { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; } .bubble.in.milo { align-self: flex-start; background: var(--card); border: 1px solid var(--accent-line); display: flex; flex-direction: column; gap: .35rem; } .milo-tag { font-size: .72rem; font-weight: 700; color: var(--accent-ink); } .tool-chip { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: var(--muted); background: var(--inset); border: 1px solid var(--line); padding: .12rem .45rem; border-radius: var(--r-xs); } /* Panneau de création (overlay) */ .overlay { position: fixed; inset: 0; background: rgba(8,10,14,.6); backdrop-filter: blur(4px); /* z-index élevé : une modale (confirmation, RDV, QR) reste toujours cliquable au-dessus du deck et d'une colonne de conversation ouverte. */ display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 150; overflow-y: auto; /* dernier recours si la modale dépasse l'écran (mobile) */ } .panel { position: relative; } .panel .close, .card .close { position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--inset); color: var(--muted); border-radius: var(--r-sm); cursor: pointer; font-size: 1rem; line-height: 1; z-index: 2; } .panel .close:hover, .card .close:hover { color: var(--fg); border-color: var(--accent-ink); } /* Card avec .close : réserve la place pour le bouton × (hors chat-card qui gère son propre layout) */ .card:has(.close):not(.chat-card) { position: relative; padding-top: 2.8rem; } .panel { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.6rem; } /* Modale plus haute que l'écran (ex. « Nouvel événement » sur mobile) : le panneau ne doit jamais déborder hors du viewport sinon ses boutons d'action (Ajouter, Enregistrer…) deviennent inatteignables. On le plafonne et on le rend défilant. Scopé à `.overlay .panel` pour ne pas affecter `.call-panel` (qui vit dans `.call-dock`, hors `.overlay`, et gère son propre layout plein écran). */ .overlay .panel { max-height: calc(100vh - 2.5rem); max-height: calc(100dvh - 2.5rem); overflow-y: auto; overscroll-behavior: contain; } .panel h2 { margin: 0 0 .3rem; font-size: 1.25rem; } .panel .sub { color: var(--muted); margin: 0 0 1.25rem; font-size: .92rem; } /* Page « Espace Premium » (vue plein écran /me/premium) : barre supérieure fixe avec bouton Retour + corps défilant. Pas de deck ni de bottom-nav → scroll interne normal, et le bouton retour du navigateur fonctionne nativement. */ /* Modèle scroll simple : le body scrolle nativement (pas de chaîne flex fragile), le topbar reste collant en haut. Évite les problèmes de 100dvh + flex où le contenu interne ne pouvait plus défiler. */ #app[data-view="premium"] { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; } .prem-page-view { width: 100%; max-width: 760px; display: flex; flex-direction: column; } .prem-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .prem-topbar-title { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1.05rem; } .prem-body { padding: 1rem; padding-bottom: 4rem; } /* ── Hero « Ce que ton espace privé débloque » ──────────────────────────── */ .prem-benefits { margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 10%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); } .prem-benefits-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; } .prem-benefits-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-ink); } .prem-benefits-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .prem-benefits-sub { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.4; } .prem-benefits-list { margin: 0; padding: 0; /* Flex plutôt que grid auto-fit : avec 5 cartes, une grille laisse une cellule vide en fin de dernière rangée (aspect « pas centré »). En flex, les cartes de chaque rangée s'étirent pour la remplir (flex-grow) — dernière rangée comprise — et sur mobile on retombe sur une colonne pleine largeur. */ display: flex; flex-wrap: wrap; gap: .6rem; } .prem-benefit { position: relative; display: block; cursor: pointer; flex: 1 1 240px; } .prem-benefit input.prem-benefit-cb { position: absolute; opacity: 0; pointer-events: none; } .prem-benefit-card { display: grid; grid-template-columns: 32px 1fr 22px; align-items: start; gap: .6rem; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); transition: border-color .15s, background .15s, box-shadow .15s, transform .12s; min-height: 56px; } .prem-benefit:hover .prem-benefit-card { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .prem-benefit input:checked + .prem-benefit-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset; } .prem-benefit input:focus-visible + .prem-benefit-card { outline: 2px solid var(--accent); outline-offset: 2px; } .prem-benefit input:disabled + .prem-benefit-card { opacity: .55; cursor: not-allowed; } .prem-benefit-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); } .prem-benefit-text { min-width: 0; } .prem-benefit-text b { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; } .prem-benefit-text span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; margin-top: .15rem; } .prem-benefit-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 4px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg-soft); color: transparent; transition: all .12s; } .prem-benefit input:checked + .prem-benefit-card .prem-benefit-check { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } /* ── Avantages de mon abonnement Premium ────────────────────────────────── */ /* Variante des benefits : items en pile verticale, plus dense, avec un mode */ /* « info » pour les capabilities non-togglables (badge « Inclus »). */ .prem-perks-list { display: flex; flex-direction: column; gap: .5rem; } .prem-perk { position: relative; display: block; cursor: pointer; } .prem-perk.prem-perk--info { cursor: default; } .prem-perk input.prem-perk-cb { position: absolute; opacity: 0; pointer-events: none; } .prem-perk-card { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); transition: border-color .15s, background .15s; min-height: 52px; } .prem-perk:hover .prem-perk-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .prem-perk.prem-perk--info:hover .prem-perk-card { border-color: var(--line); } .prem-perk input:checked + .prem-perk-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); } .prem-perk input:focus-visible + .prem-perk-card { outline: 2px solid var(--accent); outline-offset: 2px; } .prem-perk-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); } .prem-perk-text { min-width: 0; } .prem-perk-text b { display: block; font-weight: 600; font-size: .88rem; line-height: 1.3; } .prem-perk-text span { display: block; font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: .15rem; } .prem-perk-text code { font-size: .72em; padding: .05rem .25rem; border-radius: 3px; background: var(--bg-soft); font-family: var(--mono); } .prem-perk-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg-soft); color: transparent; transition: all .12s; } .prem-perk input:checked + .prem-perk-card .prem-perk-check { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .prem-perk-badge { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--success, #2ecc71) 18%, transparent); color: var(--success, #2ecc71); } /* ── Tabs Premium : menu de navigation entre les 3 panes ── Pattern segmented-control sticky sous la topbar. JS bascule `[data-prem-pane]` via la classe `.is-active` sur la pane et le bouton. */ .prem-tabs { display: flex; gap: .35rem; flex-wrap: nowrap; margin: 0 0 1.1rem; padding: .25rem; background: var(--bg-soft, color-mix(in srgb, var(--card) 70%, var(--bg))); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); position: sticky; top: 0; z-index: 2; } .prem-tab-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; padding: .55rem .55rem; background: transparent; color: var(--muted); border: none; border-radius: calc(var(--r-sm, 10px) - 2px); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; overflow: hidden; } .prem-tab-btn:hover { background: color-mix(in srgb, var(--accent-soft, var(--card)) 50%, transparent); color: var(--fg); } .prem-tab-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; } .prem-tab-btn.is-active { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.18); } .prem-tab-btn svg { flex: none; color: var(--accent-ink); } .prem-tab-btn > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Mobile : padding et fonte plus compacts pour tenir sur 1 ligne. */ @media (max-width: 540px) { .prem-tabs { gap: .2rem; padding: .2rem; } .prem-tab-btn { padding: .5rem .35rem; gap: .3rem; } .prem-tab-btn > span { font-size: .74rem; } } /* Très petit : on cache le label, icône seule (chip carré). */ @media (max-width: 380px) { .prem-tab-btn > span { display: none; } } /* Une pane = une section logique du Premium. JS toggle [hidden]. */ .prem-pane[hidden] { display: none; } /* ── Upsell Premium (pane Personnalisation, compte non-Premium) ── Carte unique mise en avant : titre + bénéfices + CTA essai gratuit. */ .prem-upsell { /* Largeur bornée + centrée horizontalement (sur grand écran, sinon pleine largeur sous 600px) pour ne pas s'étaler sur toute la zone de contenu. */ margin: 0 auto 1rem; max-width: 600px; padding: 1.5rem 1.4rem 1.3rem; border-radius: var(--r-md, 14px); border: 1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-ink) 18%, transparent), transparent 55%), color-mix(in srgb, var(--card) 92%, transparent); } .prem-upsell-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .8rem; } .prem-upsell-ic { flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent-ink) 22%, transparent); border-radius: 50%; color: var(--accent-ink); } .prem-upsell-title { margin: 0 0 .15rem; font-size: 1.05rem; line-height: 1.35; font-weight: 700; } .prem-upsell-sub { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); } .prem-upsell-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; } .prem-upsell-list li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--fg); } .prem-upsell-list li svg { flex: none; color: var(--accent-ink); } .prem-upsell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } #prem-upsell-trial { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .55rem; padding: .7rem 1.1rem; font-weight: 700; line-height: 1.25; } .prem-upsell-trial-sub { display: block; width: 100%; font-size: .7rem; font-weight: 500; opacity: .82; margin-top: -.05rem; } /* ── Titres de sections (Mon abonnement / Mon espace privé / Mon profil) ── */ .prem-section-title { display: flex; align-items: center; gap: .5rem; margin: 1.6rem 0 .75rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .prem-section-title:first-of-type { margin-top: 0; } .prem-section-title svg { color: var(--accent-ink); } .prem-section-sub { font-weight: 500; font-size: .72rem; opacity: .65; text-transform: none; letter-spacing: 0; margin-left: .15rem; } /* La vue Premium n'est PAS dans une cellule de deck contrainte en hauteur : neutraliser la classe .col-scroll (héritée du markup partagé) pour laisser le document scroller normalement. La topbar reste sticky côté document. */ #app[data-view="premium"] .col-scroll { overflow: visible; height: auto; max-height: none; flex: none; } .panel label { display: block; font-size: .82rem; color: var(--muted); margin: 0 0 .3rem; } .panel .group { margin-bottom: 1rem; } .handle-input { position: relative; display: flex; align-items: center; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md); padding-left: .7rem; } .handle-input span { color: var(--muted); } .handle-input input { border: none; background: none; } .panel .err { color: var(--danger); font-size: .85rem; min-height: 1.1rem; margin: -.3rem 0 .6rem; } .panel label.cr-ack { display: flex; align-items: flex-start; gap: .5rem; color: var(--ink); font-size: .85rem; line-height: 1.4; margin: 0; cursor: pointer; } .panel label.cr-ack input[type="checkbox"] { width: auto; min-width: 0; padding: 0; border: none; background: none; margin: .15rem 0 0; flex: none; accent-color: var(--accent-ink); } .panel label.cr-ack span { flex: 1; min-width: 0; } .panel label.cr-ack a { color: var(--accent); text-decoration: underline; } /* Champ de saisie PIN : gros chiffres centrés, espacés et tabulaires — gabarit IDENTIQUE pour la saisie et la confirmation (fini les tailles 1.5/1.3 divergentes). */ .pin-input { text-align: center; letter-spacing: .4em; text-indent: .4em; /* recentre le texte malgré l'espacement à droite */ font-size: 1.4rem; font-variant-numeric: tabular-nums; padding-block: .7rem; } .panel .hint { color: var(--muted); font-size: .78rem; margin: .35rem 0 0; } .lost-key { margin: .9rem 0 0; font-size: .85rem; } .lost-key a { color: var(--muted); text-decoration: underline; } .lost-key a:hover { color: var(--accent-ink); } .trust { margin: 1rem auto 0; font-size: .82rem; color: var(--muted); display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); } /* Indicateur d'adoption (nombre d'identités créées) */ .adoption { margin: 1rem auto 0; font-size: .9rem; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); } .adoption[hidden] { display: none; } .adoption .adopt-num { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .adopt-trend { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; color: var(--success); background: rgba(95,211,154,.12); border: 1px solid rgba(95,211,154,.35); border-radius: 999px; padding: .1rem .45rem; } .lbl-sm { display: block; font-size: .78rem; color: var(--muted); } /* Notifications (cloche + popover) */ .notif-wrap { position: relative; display: inline-flex; } #notif-bell { position: relative; } .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .66rem; font-weight: 700; line-height: 16px; text-align: center; } .notif-badge[hidden] { display: none; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: min(320px, 90vw); max-height: 60vh; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; } .notif-panel[hidden] { display: none; } .notif-head { padding: .6rem .85rem; font-size: .8rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; } .notif-list { list-style: none; margin: 0; padding: .25rem; overflow-y: auto; display: grid; gap: .15rem; } .notif { border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease-out); } .notif a, .notif > .nt, .notif-act { display: block; width: 100%; padding: .5rem .6rem; text-decoration: none; color: var(--fg); } .notif-act { background: none; border: none; cursor: pointer; font: inherit; text-align: left; } .notif:hover { background: var(--bg-soft); } /* Non-lu : liseré accent à gauche (indicateur explicite, pas seulement une teinte de fond) + fond teinté léger. */ .notif.unread { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .notif .nt { font-size: var(--t-sm); } .notif .nd { display: block; font-size: var(--t-2xs); color: var(--muted); margin-top: .1rem; padding: 0 .6rem .4rem; } .notif a .nd { padding: .1rem 0 0; } .notif-list .empty { padding: 1rem .6rem; } /* En colonne (deck) : pas de hauteur/scroll propres, la colonne s'en charge */ .notif-col { overflow: visible; max-height: none; padding: 0; } /* Conversation éphémère */ /* Discussion : colonne fermable du deck éditeur, insérée à droite de « Identité » (plus de sidebar flottante). La carte hérite du flux flex de .deck .col > .card. */ .chat-card { position: relative; } /* La colonne de chat remplit toute la hauteur (y compris sur le profil public où les cartes sont sinon centrées verticalement) ; seul .chat-log défile. */ .deck .col > .chat-card { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .chat-card .close { position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--inset); color: var(--muted); border-radius: var(--r-sm); cursor: pointer; font-size: 1rem; line-height: 1; z-index: 2; } .chat-card .close:hover { color: var(--fg); border-color: var(--accent-ink); } .chat-card .chat-head { padding-right: 2.6rem; } /* place pour le bouton ✕ */ .chat-log { flex: 1; min-height: 120px; max-height: none; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .6rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: .6rem; } /* ════════════════ Bulles style WhatsApp ════════════════ */ .chat-log > .bubble { max-width: 78%; padding: .45rem .65rem .3rem .65rem; border-radius: 7.5px; font-size: var(--t-sm); line-height: 1.45; word-break: break-word; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.22); overflow: visible; /* laisse la queue déborder */ } /* ── Envoyé : couleur d'accent caméléon, queue droite ── */ .chat-log > .bubble.mine { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-radius: 7.5px 7.5px 2px 7.5px; margin-right: 9px; } .chat-log > .bubble.mine::before { content: ''; position: absolute; bottom: 0; right: -7px; border-style: solid; border-width: 9px 0 0 9px; border-color: transparent transparent transparent var(--accent); } /* ── Reçu : teinte dérivée du handle, queue gauche ── */ .chat-log > .bubble.theirs { align-self: flex-start; /* hsl(hue 16% 19%) dark · hue issu du hash du handle (défini en JS via --bbl-theirs-tint) */ background: hsl(var(--bbl-theirs-tint, 200) 16% 19%); color: var(--bbl-theirs-fg); border: none; border-radius: 7.5px 7.5px 7.5px 2px; margin-left: 9px; } :root[data-theme="light"] .chat-log > .bubble.theirs { background: hsl(var(--bbl-theirs-tint, 200) 28% 94%); color: var(--bbl-theirs-fg); } .chat-log > .bubble.theirs::before { content: ''; position: absolute; bottom: 0; left: -7px; border-style: solid; border-width: 9px 9px 0 0; border-color: transparent hsl(var(--bbl-theirs-tint, 200) 16% 19%) transparent transparent; } :root[data-theme="light"] .chat-log > .bubble.theirs::before { border-color: transparent hsl(var(--bbl-theirs-tint, 200) 28% 94%) transparent transparent; } .chat-restore { display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center; margin: auto; padding: 1rem; color: var(--muted); } .chat-restore p { margin: 0; font-size: .9rem; line-height: 1.5; } .chat-backup { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: space-between; padding: .5rem .7rem; margin-bottom: .5rem; border-radius: var(--r-sm); background: var(--card, rgba(255,255,255,.05)); font-size: .82rem; line-height: 1.4; } .chat-backup button { flex: none; } /* Ligne d'historique d'appel : neutre et centrée, ni « mine » ni « theirs ». */ .chat-log > .bubble:has(.b-call) { align-self: center; background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: 999px; padding: 4px 14px; margin: 0; } .chat-log > .bubble:has(.b-call)::before { display: none; } .b-call { font-size: .85em; } /* Entrée d'un message qui vient d'arriver (uniquement les nouveaux : cf. chat.js) */ @keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } .chat-log > .bubble.bubble-enter { animation: bubble-in .26s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion: reduce) { .chat-log > .bubble.bubble-enter { animation: none; } } /* Conversation archivée : bandeau + bulles en lecture seule */ .chat-archived-banner { align-self: stretch; text-align: center; margin: 0 0 .5rem; padding: .4rem .6rem; font-size: .76rem; line-height: 1.4; color: var(--muted); background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--r-sm); } .chat-archived-banner b { color: var(--fg); } .chat-log > .bubble.archived { opacity: .82; box-shadow: none; } .chat-form.readonly { opacity: .55; pointer-events: none; } /* Ligne méta (heure + ticks) : float-right pour coller en bas à droite — */ /* pattern WhatsApp classique. */ .bubble .t { float: right; display: inline-flex; align-items: center; gap: 3px; margin: .15rem 0 -.05rem .55rem; line-height: 1; } .bubble .t-time { font-size: .67rem; color: var(--bbl-meta); opacity: 1; cursor: default; user-select: none; white-space: nowrap; } .bubble .t-time:hover { opacity: .85; text-decoration: none; } /* Compte à rebours avant suppression (déplié au clic sur l'heure) */ .b-countdown { display: block; clear: both; font-size: .61rem; opacity: .75; font-style: italic; text-align: right; margin-top: .1rem; } .b-countdown[hidden] { display: none; } .bubble.mine .b-countdown { color: var(--on-accent); opacity: .7; } /* Ticks : gris = envoyé, double = reçu, bleu = lu */ .bubble .ticks { font-size: .8rem; color: var(--bbl-meta); letter-spacing: -.08em; line-height: 1; } .bubble .ticks.read { color: var(--bbl-ticks-read) !important; opacity: 1; } /* Réactions */ .b-reacts { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; } .react { font-size: .72rem; padding: .05rem .35rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; } .react.mine { border-color: var(--accent-ink); } .bubble.mine .react { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.22); color: var(--on-accent); } .bubble.theirs .react { color: var(--bbl-theirs-fg); } /* Actions inline sur la ligne de l'heure : visibles seulement au survol du message */ .b-react-btn, .b-del { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: .8rem; line-height: 1; text-align: center; padding: 0; color: var(--fg); flex: none; opacity: 0; transition: opacity .12s ease; } .bubble:hover .b-react-btn, .bubble:hover .b-del, .b-react-btn:focus-visible, .b-del:focus-visible { opacity: 1; } .bubble.mine .b-react-btn, .bubble.mine .b-del { background: rgba(0,0,0,.14); border-color: rgba(0,0,0,.2); color: var(--on-accent); } .b-react-btn:hover { border-color: var(--accent-ink); } .b-del:hover { color: var(--danger); border-color: var(--danger); } /* Popover de sélection d'emoji (au niveau du panneau, pas dans le log) */ .react-pick { position: absolute; z-index: 10; display: flex; gap: .1rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .4rem; box-shadow: 0 8px 22px rgba(0,0,0,.45); } .react-pick[hidden] { display: none; } .react-pick button { border: none; background: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: .15rem .25rem; border-radius: var(--r-sm); } .react-pick button:hover { background: var(--bg-soft); transform: scale(1.15); } /* Composer sur 2 lignes : barre d'actions (📎🎤👁) en haut, champ + envoi en bas (champ pleine largeur → plus d'espace de saisie). */ .chat-form { display: flex; flex-direction: column; gap: .4rem; } .chat-actions { display: flex; align-items: center; gap: .4rem; } .chat-input-row { display: flex; align-items: center; gap: .4rem; } .chat-input-row input { flex: 1; min-width: 0; } .chat-input-row .btn.primary { flex: none; padding: .4rem .7rem; } /* Bouton d'appel : sur la rangée d'actions (avec 📎🎤👁), en vert, occupe l'espace restant. */ .chat-call-btn, .comm-right .chat-call-btn { background: #1f9d57; color: #fff; border-color: transparent; } .chat-call-btn:hover, .comm-right .chat-call-btn:hover { background: #1c8b4d; } .chat-call-btn svg { color: #fff; } .chat-actions .chat-call-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; } /* État « échange impossible » : illustration + explication, centré dans le log. */ .chat-blocked { display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; padding: 2.2rem 1.2rem; color: var(--muted); } .chat-blocked-svg { color: var(--muted); opacity: .9; } .chat-blocked-text { max-width: 32ch; line-height: 1.55; font-size: .9rem; margin: 0; } .chat-blocked-text b { color: var(--fg); } /* QR code */ .qr-box { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--r-md); padding: 14px; margin: .25rem auto 1rem; width: max-content; } .qr-box img, .qr-box canvas { display: block; } /* Section MCP (landing) */ .mcp { width: 100%; max-width: 880px; padding: 1rem 1.25rem 4rem; } .mcp-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; } .mcp-head .ic { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; } .mcp-head h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.7rem); letter-spacing: -.02em; } .mcp-lead { color: var(--muted); max-width: 48rem; } .mcp-lead em { display: block; margin-top: .5rem; color: var(--fg); opacity: .8; } /* Grille intrinsèque (2026) : reflow auto 3→2→1 sans breakpoint. */ .mcp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin: 1.5rem 0; } .mcp-step { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem; } .mcp-step .num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #0b0d12; font-weight: 700; font-size: .85rem; margin-bottom: .55rem; } .mcp-step p { margin: 0; font-size: .92rem; } .mcp-step code { background: var(--card); padding: .1rem .4rem; border-radius: var(--r-xs); border: 1px solid var(--line); } .mcp-tabs { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; flex-wrap: wrap; } .mcp-tab { padding: .5rem .95rem; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; transition: border-color .15s, background .15s, color .15s; } .mcp-tab:hover { border-color: var(--accent-ink); } .mcp-tab.active { background: var(--accent); color: #0b0d12; border-color: var(--accent-ink); font-weight: 600; } .mcp-panel[hidden] { display: none; } .mcp-panel-lead { color: var(--muted); margin: 0 0 .75rem; } .mcp-url { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .mcp-url code { flex: 1; min-width: 200px; background: #0c0e13; border: 1px solid var(--line); padding: .55rem .7rem; border-radius: var(--r-sm); font-size: .85rem; } .mcp-steps { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); display: grid; gap: .4rem; font-size: .9rem; } .mcp-steps strong { color: var(--fg); } .mcp-details summary { cursor: pointer; color: var(--accent-ink); font-size: .85rem; margin-bottom: .6rem; } .mcp-config { background: #0c0e13; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .mcp-config-head { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); } .mcp-config pre { margin: 0; padding: 1rem; overflow-x: auto; font: 13px/1.55 var(--font-mono); color: #cdd3df; } .mcp-note { color: var(--muted); font-size: .82rem; margin-top: .8rem; } .panel .actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .5rem; } /* Bloc succès création */ .created .key-box { background: var(--inset); border: 1px dashed var(--accent); border-radius: var(--r-sm); padding: .7rem; word-break: break-all; font-size: .85rem; margin: .4rem 0 1rem; } .created .warn { color: var(--accent-ink); font-size: .85rem; line-height: 1.45; } /* Appel à l'action passkey (étape post-création, mise en avant). */ .cr-passkey-cta { margin: 1.1rem 0 .5rem; padding: .9rem 1rem; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--inset); } .cr-passkey-head { display: flex; align-items: center; gap: .45rem; font-size: .98rem; } .cr-passkey-head svg { color: var(--accent-ink); flex: none; } .cr-passkey-cta .hint { margin: .4rem 0 .8rem; } .cr-passkey-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .cr-continue { margin-top: 1rem; } .url-row { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; } .url-row code { flex: 1; background: var(--inset); border: 1px solid var(--line); padding: .5rem .6rem; border-radius: var(--r-sm); word-break: break-all; font-size: .82rem; } .copy { padding: .5rem .7rem; } .sig-block { margin: .75rem 0 .25rem; text-align: left; } .sig-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; } .sig-title { color: var(--muted); font-size: .82rem; font-weight: 600; } /* Aperçu sur fond blanc : reflète le rendu réel dans un client mail. */ .sig-preview { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem .85rem; overflow-wrap: anywhere; } /* ============================== Carte ============================== */ .card { width: 100%; max-width: var(--maxw); margin: 2.5rem auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; } /* Profil public : page verticale adaptative */ .pub-page { width: 100%; max-width: 540px; margin: 1.5rem auto 4rem; padding: 0 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .pub-page > .card, .pub-page > .pub-section { margin: 0; max-width: none; } .pub-page .col-scroll { overflow: visible; height: auto; max-height: none; flex: none; } @media (max-width: 600px) { .pub-page { margin-top: .75rem; padding: 0 .75rem; } /* — Deck swipeable (mobile) — les cartes deviennent des volets horizontaux. */ .pub-page.pub-swipe { position: relative; overflow: hidden; width: 100%; padding: 0 0 2.7rem; /* pas de padding latéral : porté par les volets (calc du swipe exact) */ } .pub-swipe .pub-track { display: flex; align-items: stretch; will-change: transform; } .pub-swipe .pub-slide { flex: 0 0 100%; box-sizing: border-box; min-width: 0; padding: .3rem .75rem; display: flex; flex-direction: column; justify-content: center; } .pub-swipe .pub-slide > .card, .pub-swipe .pub-slide > .pub-section { margin: 0; max-width: none; width: 100%; } /* Points indicateurs de position */ .pub-dots { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 5; display: flex; gap: .42rem; justify-content: center; } .pub-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s ease, transform .2s ease; } .pub-dot.active { background: var(--accent); transform: scale(1.4); } /* Flèche d'invitation au swipe (le chevron oscille, cf. GSAP) */ .pub-swipe-hint { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); z-index: 6; display: inline-flex; align-items: center; gap: .12rem; padding: .42rem .55rem .42rem .7rem; cursor: pointer; color: var(--accent-ink); background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.28); backdrop-filter: blur(7px); transition: opacity .25s ease; } .pub-swipe-hint-txt { font-size: .73rem; font-weight: 600; letter-spacing: -.01em; } .pub-swipe-hint.hidden { opacity: 0; pointer-events: none; } .pub-swipe-hint.gone { display: none; } } /* =================================================================== Page profil publique — layout adaptatif Mobile : héro 100svh → onglets sticky → contenu Tablet : héro 55svh → onglets sticky → contenu Desktop ≥1024px : héro sticky à gauche (40%), contenu à droite (60%) =================================================================== */ .pub-hero-page { width: 100%; display: flex; flex-direction: column; min-height: 100svh; } /* --- Cover hero --- */ .pub-cover-hero { position: relative; width: 100%; height: 100svh; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; flex-shrink: 0; overflow: hidden; /* indispensable : sinon la peut dépasser */ } .pub-cover-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .pub-cover-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 52%, transparent 100%); } /* Boutons discrets en haut à droite (QR…) */ .pub-cover-top { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: flex; gap: .5rem; align-items: center; } /* Boutons cover (haut-droite ET haut-gauche) : glass */ .pub-cover-top .btn, .pub-cover-top button, .pub-cover-top-left .btn, .pub-cover-top-left button { background: rgba(0,0,0,.42); color: #fff; border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pub-cover-top .btn:hover, .pub-cover-top button:hover, .pub-cover-top-left .btn:hover, .pub-cover-top-left button:hover { background: rgba(0,0,0,.62); } /* theme-toggle dans la cover : même gabarit que les autres boutons */ .pub-cover-top .theme-toggle, .pub-cover-top-left .theme-toggle { width: auto; height: auto; padding: .35rem .45rem; border-radius: 6px; margin: 0; border-color: transparent; } .pub-cover-top .theme-toggle:hover, .pub-cover-top-left .theme-toggle:hover { transform: none; border-color: transparent; } /* Haut-gauche : retour / recherche / déconnexion */ .pub-cover-top-left { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: flex; gap: .5rem; align-items: center; } /* Avatar wrap : taille S/L/XL. Le wrap a la taille EXACTE de la photo (les boutons S/L/XL flottent à côté en position absolue, sortis du flux). align-self: flex-start empêche le parent flex column (.pub-cover-identity, align-items: stretch par défaut) d'étirer le wrap à 100% de largeur. */ .pub-av-wrap { position: relative; display: inline-block; align-self: flex-start; } .pub-av-wrap[data-size="s"] .pub-cover-av, .pub-av-wrap[data-size="s"] .pub-cover-av-gen, .pub-av-wrap[data-size="s"] .pub-cover-av-milo { width: 40px; height: 40px; } .pub-av-wrap[data-size="l"] .pub-cover-av, .pub-av-wrap[data-size="l"] .pub-cover-av-gen, .pub-av-wrap[data-size="l"] .pub-cover-av-milo { width: 60px; height: 60px; } .pub-av-wrap[data-size="xl"] .pub-cover-av, .pub-av-wrap[data-size="xl"] .pub-cover-av-gen, .pub-av-wrap[data-size="xl"] .pub-cover-av-milo { width: 90px; height: 90px; } /* Photo seule (wrapper pour le label upload) */ .pub-av-photo { position: relative; display: inline-flex; } /* Bouton caméra sur l'avatar (isSelf) — couvre uniquement pub-av-photo */ .pub-av-upload-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.0); color: rgba(255,255,255,0); border-radius: 50%; cursor: pointer; transition: background .15s, color .15s; } .pub-av-photo:hover .pub-av-upload-btn { background: rgba(0,0,0,.52); color: #fff; } /* Sélecteur de taille S/L/XL : flotte à droite de l'avatar (sortie du flux pour ne pas gonfler le wrap). Aligné sur le HAUT de la photo (et non centré verticalement) car l'avatar a margin-bottom — un translate(-50%) sur le wrap décale visuellement vers le bas. */ .pub-av-sizes { position: absolute; top: 0; left: calc(100% + .5rem); display: flex; gap: 3px; } .pub-av-size-btn { padding: .2rem .5rem; font-size: .68rem; font-weight: 700; background: rgba(0,0,0,.45); color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.18); border-radius: 99px; cursor: pointer; transition: background .12s, color .12s; min-height: 28px; } .pub-av-size-btn.active, .pub-av-size-btn:hover { background: rgba(0,0,0,.72); color: #fff; border-color: rgba(255,255,255,.45); } /* Identité overlay en bas */ .pub-cover-identity { position: relative; z-index: 2; padding: 1.5rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; } /* ── Galerie uploadable ── */ .gal-ph { position: relative; } .gal-ph:not(.gal-filled) { opacity: .55; } .gal-ph.gal-drag { outline: 2px dashed var(--accent-ink); opacity: 1; } .gal-slot-upload { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: rgba(255,255,255,0); cursor: pointer; border-radius: 4px; transition: background .15s, color .15s; } .gal-ph:not(.gal-filled):hover .gal-slot-upload, .gal-ph:not(.gal-filled) .gal-slot-upload { color: rgba(255,255,255,.7); } .gal-ph.gal-filled .gal-slot-upload { display: none; } .gal-slot-del { position: absolute; top: 4px; right: 4px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; padding: 0; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .gal-ph.gal-filled:hover .gal-slot-del { display: flex; } .pub-cover-av, .pub-cover-av-gen, .pub-cover-av-milo { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.4); margin-bottom: .55rem; } .pub-cover-av { object-fit: cover; display: block; } /* Forme avatar — toggle au reclic sur la taille active (cf. applyAvSize JS). Par défaut le CSS de base met border-radius:50% : on l'override explicitement pour la forme « square » (léger arrondi) et on RÉAFFIRME 50% en « circle » pour battre toute règle plus spécifique. */ .pub-av-wrap[data-shape="square"] .pub-cover-av, .pub-av-wrap[data-shape="square"] .pub-cover-av-gen, .pub-av-wrap[data-shape="square"] .pub-cover-av-milo, .pub-av-wrap[data-shape="square"] .pub-cover-av-gen svg, .pub-av-wrap[data-shape="square"] .pub-cover-av-milo svg { border-radius: 12px; } .pub-av-wrap[data-shape="circle"] .pub-cover-av, .pub-av-wrap[data-shape="circle"] .pub-cover-av-gen, .pub-av-wrap[data-shape="circle"] .pub-cover-av-milo, .pub-av-wrap[data-shape="circle"] .pub-cover-av-gen svg, .pub-av-wrap[data-shape="circle"] .pub-cover-av-milo svg { border-radius: 50%; } /* Le SVG remplit son conteneur (.pub-cover-av-gen / -milo) à 100% : sans ça il reste figé à 60px et l'avatar « flotte » dans le cadre en taille XL (90px). */ .pub-cover-av-gen svg, .pub-cover-av-milo svg { width: 100%; height: 100%; display: block; border-radius: 50%; } .pub-cover-names { display: flex; flex-direction: column; gap: .12rem; } .pub-cover-name { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -.025em; line-height: 1.08; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.45); } .pub-cover-handle { color: rgba(255,255,255,.75); font-size: .95rem; margin: 0; } /* Ligne @handle + badge de plan (Gratuit/Premium) côte à côte sur Ma page. */ .pub-cover-handle-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .pub-plan-wrap { position: relative; display: inline-flex; } /* Badge stylisé — visible seulement en mode propriétaire (isSelf). */ .pub-plan-badge { display: inline-flex; align-items: center; gap: .28rem; padding: .18rem .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); cursor: pointer; backdrop-filter: blur(4px); transition: background .15s, transform .15s, box-shadow .15s; } .pub-plan-badge:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); } /* Variante visiteur : badge indicatif (pas un button, pas de hover, pas de menu). */ .pub-plan-badge--readonly { cursor: default; pointer-events: none; } .pub-plan-badge--readonly:hover { transform: none; } .pub-plan-badge.is-premium { background: linear-gradient(135deg, #f7c14a 0%, #e96bb1 55%, #8b5cf6 100%); color: #fff; border-color: transparent; box-shadow: 0 2px 12px rgba(233,107,177,.4), 0 0 16px rgba(247,193,74,.35); animation: pub-plan-pulse 2.6s ease-in-out infinite; } .pub-plan-badge.is-premium:hover { box-shadow: 0 4px 20px rgba(233,107,177,.55), 0 0 24px rgba(247,193,74,.55); } @keyframes pub-plan-pulse { 0%, 100% { box-shadow: 0 2px 8px rgba(233,107,177,.3), 0 0 10px rgba(247,193,74,.2); } 50% { box-shadow: 0 4px 16px rgba(233,107,177,.55), 0 0 22px rgba(247,193,74,.5); } } @media (prefers-reduced-motion: reduce) { .pub-plan-badge.is-premium { animation: none; } } /* Pop-over avec la liste des fonctions premium. Positionné AU-DESSUS du badge (le badge est en bas du hero ; un menu vers le bas masquerait les dots de navigation et la zone est tronquée par le viewport). */ .pub-plan-menu { position: absolute; bottom: calc(100% + .45rem); left: 0; z-index: 5; min-width: 280px; max-width: 92vw; padding: .65rem; background: rgba(22,22,28,.96); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg, 12px); box-shadow: 0 12px 40px rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: .35rem; } .pub-plan-menu[hidden] { display: none; } .pub-plan-menu-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .25rem; padding: .15rem .25rem; font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.65); text-transform: uppercase; } .pub-plan-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .55rem; border-radius: var(--r-sm, 8px); color: #fff; text-decoration: none; transition: background .12s; } .pub-plan-item:hover { background: rgba(255,255,255,.08); } .pub-plan-item > span { display: flex; flex-direction: column; gap: .05rem; line-height: 1.2; } .pub-plan-item b { font-size: .87rem; font-weight: 600; } .pub-plan-item small { font-size: .72rem; opacity: .65; } .pub-plan-cta { margin-top: .35rem; text-align: center; } .pub-cover-title { color: rgba(255,255,255,.6); font-size: .88rem; margin: 0; } .pub-cover-loc { color: rgba(255,255,255,.55); font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; margin: .1rem 0 0; } .pub-cover-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; } /* Boutons d'action sur la cover (relation, chat) en style glass */ .pub-cover-actions .btn, .pub-cover-actions .rel-switch { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pub-cover-actions .btn:hover { background: rgba(255,255,255,.25); } .pub-cover-actions .rel-switch { border-radius: var(--r-xl); padding: .4rem .8rem; } .pub-cover-actions .profile-contact-actions { margin: 0; display: contents; } .pub-cover-actions .profile-contact-actions .btn { flex: none; } /* Bouton relation SVG icône (dans pub-cover-top, haut-droite) */ .rel-toggle-icon { padding: .35rem .45rem; line-height: 0; } .rel-toggle-icon svg { display: block; } .rel-toggle-icon.is-on { background: rgba(255,255,255,.28) !important; color: #fff !important; } /* --- Zone de corps (onglets + contenu) --- */ .pub-body { display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; } /* --- Barre d'onglets --- */ .pub-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); } .pub-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem .5rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; position: relative; transition: color var(--dur) var(--ease-out); touch-action: manipulation; min-height: 44px; } .pub-tab::after { content: ""; position: absolute; bottom: 0; left: 12%; right: 12%; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--dur) var(--ease-spring); } .pub-tab.is-on { color: var(--accent-ink); font-weight: 700; } .pub-tab.is-on::after { transform: scaleX(1); } .pub-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; } .pub-tab svg { color: currentColor; } /* --- Panneaux de contenu --- */ .pub-tab-body { flex: 1; } .pub-tab-panel { padding: 1.25rem 1.25rem 3rem; max-width: 680px; margin: 0 auto; } .pub-tab-panel[hidden] { display: none; } .pub-section-h { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 .65rem; } .pub-section-h.first { margin-top: 0; } .pub-socials { margin-bottom: .75rem; } .pub-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; } /* Bio proéminente */ .pub-bio { font-size: 1.02rem; line-height: 1.75; color: var(--fg); margin: 0 0 1.1rem; white-space: pre-wrap; } /* Bio inline éditable (isSelf) */ .pub-bio-edit { display: block; width: 100%; font: inherit; font-size: 1.02rem; line-height: 1.75; color: var(--fg); background: transparent; border: none; border-radius: 6px; outline: none; resize: none; overflow: hidden; padding: .35rem .5rem; margin: -.35rem -.5rem .75rem; transition: background .15s, box-shadow .15s; } .pub-bio-edit::placeholder { color: var(--muted); font-style: italic; } .pub-bio-edit:hover { background: var(--hover, rgba(255,255,255,.05)); } .pub-bio-edit:focus { background: var(--hover, rgba(255,255,255,.06)); box-shadow: 0 0 0 2px var(--accent-ink); } /* Tags dans le panneau À propos */ .pub-about-tags { margin-bottom: .9rem; } /* Bouton Modifier (isSelf) : flottant en haut à droite du panneau */ .pub-edit-btn { float: right; margin: 0 0 .5rem .5rem; text-decoration: none; } /* Galerie inline dans À propos (max 10 photos, grille compacte) */ .pub-inline-gallery { margin-top: .5rem; } .pub-inline-gallery .gal-grid { grid-template-columns: repeat(3, 1fr); } .pub-inline-gallery .card { margin: 0; box-shadow: none; padding: 0; border: none; background: none; } /* ── Galerie placeholder : grille de carrés colorés ── */ .gal-ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: .5rem; } .gal-ph { aspect-ratio: 1; background: var(--ph-c, #555); border: none; cursor: pointer; border-radius: 4px; padding: 0; transition: transform .15s var(--ease-out), opacity .15s; } .gal-ph:hover { transform: scale(1.04); opacity: .85; } .gal-ph:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } /* Tuile d'ajout (galerie alimentée par le stockage tiers) */ .gal-slot-add { display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px dashed var(--line); color: var(--muted); } .gal-slot-add:hover { color: var(--accent-ink, var(--accent)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); opacity: 1; transform: none; } .gal-slot-add input { display: none; } /* ── Lightbox plein écran ── */ #gal-lb { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; } .gal-lb-bg { position: absolute; inset: 0; background: rgba(0,0,0,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .gal-lb-box { position: relative; z-index: 1; width: min(80vw, 80vh); height: min(80vw, 80vh); border-radius: 12px; transition: background .25s var(--ease-out); } .gal-lb-close { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.15); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .15s; } .gal-lb-close:hover { background: rgba(255,255,255,.28); } .gal-lb-prev, .gal-lb-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.15); color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .15s; } .gal-lb-prev:hover, .gal-lb-next:hover { background: rgba(255,255,255,.28); } .gal-lb-prev { left: 1.25rem; } .gal-lb-next { right: 1.25rem; } .gal-lb-counter { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.7); font-size: .85rem; letter-spacing: .04em; } /* Flèches stylisées ">" qui indiquent une slide voisine (mobile carrousel) : FLÈCHE NUE (pas de cercle/cadre), juste le chevron blanc avec halo respirant. Zone cliquable réduite à la flèche elle-même pour ne pas intercepter le swipe. Cachées par défaut, affichées par pubSlideArrows() côté JS. */ .pub-slide-arrow { position: fixed; top: 50%; z-index: 4; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; color: #fff; cursor: pointer; /* Zone cliquable réduite au strict minimum (le SVG du chevron). Le bouton lui-même est transparent aux events ; seul le SVG capte le clic. Sans ça, une zone de 28×28 sur les bords interceptait le geste de swipe. */ pointer-events: none; } .pub-slide-arrow > svg { pointer-events: auto; /* Animation + filter directement sur le SVG (pas sur le button transparent, où le drop-shadow s'applique mal). Drop-shadows empilés = halo plus dense. */ animation: pub-arrow-breath 2.4s ease-in-out infinite; } .pub-slide-arrow:hover > svg { animation-play-state: paused; } .pub-slide-arrow--left { left: .35rem; transform: translateY(-50%) rotate(180deg); } .pub-slide-arrow--right { right: .35rem; transform: translateY(-50%); } .pub-slide-arrow:not([hidden]) { display: inline-flex; } .pub-slide-arrow[hidden] { display: none; } /* Sur grand écran on désactive (le carrousel n'existe pas en desktop). */ @media (min-width: 768px) { .pub-slide-arrow { display: none !important; } } @keyframes pub-arrow-breath { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,.7)) drop-shadow(0 0 4px rgba(255,255,255,.4)); opacity: .8; } 50% { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(255,255,255,.55)); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pub-slide-arrow > svg { animation: none; } } /* Pastilles overlay dans le héro (mobile uniquement) */ .pub-hero-dots { position: absolute; bottom: 1.1rem; left: 0; right: 0; z-index: 3; display: none; justify-content: center; gap: 6px; } @media (max-width: 767px) { .pub-hero-dots { display: flex; /* fixed = visible sur tous les slides du carrousel, pas seulement la cover */ position: fixed; bottom: 1.1rem; z-index: 50; } } .pub-hero-dot { display: inline-flex; align-items: center; justify-content: center; padding: 8px 4px; /* zone de touch généreuse */ background: none; border: none; cursor: pointer; touch-action: manipulation; } .pub-hero-dot::after { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: width .2s ease, background .2s ease; } .pub-hero-dot.is-on::after { width: 18px; border-radius: 999px; background: #fff; } /* ── Spotlight search overlay ── */ #cv-search-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding-top: clamp(4rem, 18vh, 10rem); } .cv-sb-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); } .cv-sb-modal { position: relative; z-index: 1; width: min(580px, 92vw); background: var(--card); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px var(--hairline); overflow: hidden; animation: cvSbIn .15s var(--ease-out); } @keyframes cvSbIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } } .cv-sb-form { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--hairline); } .cv-sb-form svg { flex-shrink: 0; color: var(--muted); } .cv-sb-form input { flex: 1; background: none; border: none; outline: none; font: inherit; font-size: 1.1rem; color: var(--fg); min-width: 0; } .cv-sb-form input::placeholder { color: var(--muted); } .cv-sb-esc { font-size: .7rem; padding: .2rem .45rem; border-radius: 5px; background: var(--inset); border: 1px solid var(--line); color: var(--muted); font-family: inherit; white-space: nowrap; } .cv-sb-results { max-height: 340px; overflow-y: auto; } .cv-sb-result { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.1rem; color: var(--fg); text-decoration: none; transition: background .1s; } .cv-sb-result:hover, .cv-sb-result:focus { background: var(--chip); outline: none; } .cv-sb-result .av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .cv-sb-result .meta { display: flex; flex-direction: column; min-width: 0; } .cv-sb-result .nm { font-weight: 600; font-size: .95rem; } .cv-sb-result .hd { font-size: .8rem; color: var(--muted); } .cv-sb-empty { padding: 1.25rem 1.1rem; color: var(--muted); font-size: .9rem; text-align: center; } /* Bloc « intro + tags + socials » sous la cover, modèle Milo : visible pour TOUS les comptes (free ET premium), sur desktop comme sur mobile. Sur grand écran on lui donne la même largeur que le hero et un padding confortable, sur mobile une variante est appliquée par la media query plus bas. */ .pub-cover-about { position: relative; z-index: 3; padding: 1.4rem 1.5rem 1.6rem; background: var(--bg); display: flex; flex-direction: column; gap: .85rem; } .pub-cover-about .pub-about-tags { display: flex; flex-wrap: wrap; gap: .35rem; } /* L'onglet « À propos » desktop fait doublon avec ce bloc — masquage en grand écran ; sur mobile c'est l'inverse (cf. media query). */ @media (min-width: 768px) { #pub-about { display: none !important; } .pub-tabs [data-tab="about"] { display: none !important; } } /* --- Mobile ≤ 767px : carrousel horizontal cover → panneaux --- */ @media (max-width: 767px) { /* Bloque le scroll vertical du body (le footer hors #app rendrait la page scrollable) */ body:has(#app[data-view="profile"] .pub-hero-page) { overflow: hidden; } /* pub-hero-page = scroll-container horizontal + fond cover pour blur des panneaux */ .pub-hero-page { flex-direction: row; height: 100svh; min-height: unset; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--pub-cover) center / cover no-repeat fixed; } .pub-hero-page::-webkit-scrollbar { display: none; } /* Cover = slide 0 : scrollable verticalement pour révéler pub-cover-about */ .pub-cover-hero { flex: 0 0 100%; scroll-snap-align: start; justify-content: flex-start; /* spacer via margin-top:auto sur identity */ overflow-y: auto; scrollbar-width: none; } .pub-cover-hero::-webkit-scrollbar { display: none; } .pub-cover-identity { margin-top: auto; } /* pub-body et pub-tab-body : flex-row sans overflow → panneaux restent dans le flux horizontal */ .pub-body { display: flex; flex-direction: row; flex: 0 0 auto; height: 100svh; } .pub-tab-body { display: flex; flex-direction: row; flex: 0 0 auto; overflow: visible; height: 100svh; } .pub-tabs { display: none; } /* Chaque panneau = un slide plein écran (100vw explicite, pas %) */ .pub-tab-panel { flex: 0 0 100vw; width: 100vw; height: 100svh; overflow-y: auto; scroll-snap-align: start; max-width: none; margin: 0; padding: 5rem 1.25rem 3rem; display: block !important; scrollbar-width: none; } .pub-tab-panel::-webkit-scrollbar { display: none; } /* pub-about n'est plus un slide sur mobile : masqué (contenu dans pub-cover-about) */ #pub-about { display: none !important; } /* Bio/tags/socials en bas du slide home — z-index:3 pour passer au-dessus du gradient */ .pub-cover-about { display: block; position: relative; z-index: 3; padding: 1.25rem 1.25rem 4.5rem; /* espace pour les dots fixes */ background: var(--bg); } /* Panneaux agenda + galerie : translucide + blur sur fond cover */ #pub-agenda, #pub-gallery-slot { background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); } /* ── Public profile 2026 : avatar plus imposant ── */ .pub-cover-av, .pub-cover-av-gen, .pub-cover-av-milo { width: 80px; height: 80px; border: 3px solid rgba(255,255,255,.6); } /* Mobile : SVG suit le conteneur (100%/100%) — sinon il reste figé à 80px pendant que .pub-cover-av-gen passe à 44/80/110px (S/L/XL). */ .pub-cover-av-gen svg, .pub-cover-av-milo svg { width: 100%; height: 100%; } .pub-av-wrap[data-size="s"] .pub-cover-av, .pub-av-wrap[data-size="s"] .pub-cover-av-gen, .pub-av-wrap[data-size="s"] .pub-cover-av-milo { width: 44px; height: 44px; } .pub-av-wrap[data-size="l"] .pub-cover-av, .pub-av-wrap[data-size="l"] .pub-cover-av-gen, .pub-av-wrap[data-size="l"] .pub-cover-av-milo { width: 80px; height: 80px; } .pub-av-wrap[data-size="xl"] .pub-cover-av, .pub-av-wrap[data-size="xl"] .pub-cover-av-gen, .pub-av-wrap[data-size="xl"] .pub-cover-av-milo { width: 110px; height: 110px; } /* ── Nom + handle plus forts ── */ .pub-cover-name { font-size: clamp(2rem, 8vw, 3.2rem); letter-spacing: -.035em; } .pub-cover-handle { font-size: 1.05rem; color: rgba(255,255,255,.9); font-weight: 500; } .pub-cover-title { font-size: .95rem; } /* ── Gradient plus profond pour lisibilité de l'identité ── */ .pub-cover-bg::after { background: linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.50) 38%, rgba(0,0,0,.10) 65%, transparent 100%); } /* ── Identité : padding bottom généreux ── */ .pub-cover-identity { padding: 1.5rem 1.25rem 2.5rem; } /* ── Boutons d'action sur la cover : plus grands, min 44px ── */ .pub-cover-actions .btn, .pub-cover-actions .rel-switch { padding: .55rem 1rem; font-size: .9rem; min-height: 44px; } /* ── Boutons glass top-left/right : vrais ronds 44px ── */ .pub-cover-top .btn, .pub-cover-top button, .pub-cover-top-left .btn, .pub-cover-top-left button { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); } /* ── Panneaux agenda/gallery : réduction padding-top (5rem → 3rem) ── */ .pub-tab-panel { padding-top: 3rem; } /* ── Fond panneaux : plus opaque pour lisibilité ── */ #pub-agenda, #pub-gallery-slot { background: color-mix(in srgb, var(--bg) 88%, transparent); } /* ── Calendrier : cellules touchables (min 44px) ── */ #pub-agenda .cal-cell-wrap { min-height: 56px; } #pub-agenda .cal-month-grid { grid-auto-rows: auto; } #pub-agenda .calendar-fill { flex: none; } /* ── Bouton RDV : CTA proéminent pleine largeur ── */ #ask-rdv { margin-top: 1.5rem !important; padding: .9rem 1.25rem !important; font-size: 1rem !important; font-weight: 700 !important; border-radius: var(--r-xl) !important; justify-content: center !important; } /* ── Galerie : plein écran — grille s'étire sur tout l'espace disponible ── */ #pub-gallery-slot { display: flex !important; flex-direction: column; padding-bottom: 2rem; } #pub-gallery-slot .gal-ph-grid { flex: 1; min-height: 0; grid-template-rows: 1fr 1fr 1fr; gap: 3px; margin-top: 0; } #pub-gallery-slot .gal-ph { aspect-ratio: unset; } /* ── Bullets de navigation : plus visibles, min 44px de zone tactile ── */ .pub-hero-dot { width: 8px; height: 8px; padding: 0; margin: 0 3px; border: none; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; transition: background .2s, transform .2s; } .pub-hero-dot.is-on { background: #fff; transform: scale(1.4); } } /* --- Tablette + Desktop ≥ 768px : héro sticky gauche + contenu droit, sans header --- */ @media (min-width: 768px) { body:has(#app[data-view="profile"] .pub-hero-page) { overflow: clip; height: 100dvh; } /* Sur PC, le topbar revient en sticky (en flux) — il décale naturellement le contenu de topbar-h sans padding manuel. La règle source-order > règle global fixed du thème hero. Les couleurs/backdrop reviennent au style standard. */ body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header { position: sticky !important; background: color-mix(in srgb, var(--bg) 88%, transparent) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border-bottom: 1px solid var(--line) !important; } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .brand, body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .brand-text, body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .btn, body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .profile-chip { color: var(--fg) !important; } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .profile-chip { background: var(--bg-soft) !important; border-color: var(--line) !important; } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header input { background: var(--inset) !important; color: var(--fg) !important; border-color: var(--line) !important; } body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header input::placeholder { color: var(--muted) !important; } /* Hauteur bornée au viewport (sous le topbar sticky) pour que la colonne de droite (.pub-body) scrolle EN INTERNE au lieu de déborder/être rognée par le body (overflow:clip). Sans ça, un panneau long (ex. Espace privé) est coupé en bas. */ .pub-hero-page { flex-direction: row; align-items: stretch; height: calc(100dvh - var(--topbar-h)); min-height: 0; overflow: hidden; } .pub-cover-hero { width: 42%; max-width: 460px; flex-shrink: 0; height: auto; min-height: 100%; position: sticky; top: 0; align-self: flex-start; margin-top: 0; padding-top: 0; } .pub-cover-identity { padding: 2rem 1.5rem 2rem; } .pub-cover-name { font-size: clamp(1.75rem, 3vw, 2.75rem); } /* pub-body est le conteneur de scroll, son bord haut est déjà sous le topbar. Donc pub-tabs colle à top:0 (= sous le topbar). Mettre top:topbar-h le décalerait de 56px trop bas et recouvrirait le début du contenu (texte coupé). scroll-padding-top = hauteur des onglets pour que le changement d'onglet ne place pas le contenu sous la barre d'onglets sticky. */ /* min-height:0 : indispensable pour qu'un enfant flex puisse être plus court que son contenu et donc activer son propre overflow:auto (sinon il s'étire à la hauteur du contenu et rien ne scrolle). */ .pub-body { flex: 1; min-width: 0; min-height: 0; height: 100%; overflow: auto; scroll-padding-top: 3.5rem; } .pub-tabs { top: 0; } /* Recherche alignée à droite dans le topbar */ body:has(#app[data-view="profile"] .pub-hero-page) .topbar.site-header .site-header-center { flex: 0 1 auto; margin-left: auto; } .pub-tab-panel { padding: 1.75rem 2rem 3rem; max-width: 640px; margin: 0; } /* 2 onglets seulement : l'onglet "Accueil" est masqué, son contenu migre côté cover */ .pub-tab[data-tab="about"] { display: none; } } /* --- Desktop ≥ 1024px --- */ @media (min-width: 1024px) { .pub-cover-hero { max-width: 560px; } .pub-cover-identity { padding: 2.5rem 2rem 2.5rem; } .pub-cover-name { font-size: clamp(2rem, 4vw, 3rem); } .pub-tab-panel { padding: 2rem 2.5rem 3rem; max-width: 680px; } } /* --- Large desktop ≥ 1200px --- */ @media (min-width: 1200px) { .pub-cover-hero { width: 40%; max-width: 640px; } /* Aligne sur la gauche : cap la largeur totale, pas de centrage */ #app[data-view="profile"] .pub-hero-page { max-width: 1440px; } .pub-tab-panel { max-width: 720px; padding: 2rem 2.5rem 3rem; } } @media (prefers-reduced-motion: reduce) { .pub-tab::after { transition: none; } } /* Éditeur privé : deck horizontal de 3 colonnes (desktop ET mobile), sans scroll vertical de page — la navigation est horizontale. */ body:has(#app[data-view="private"]) { height: 100dvh; overflow: hidden; } #app[data-view="private"] { justify-content: flex-start; min-height: 0; } .deck-viewport { width: 100%; overflow: hidden; flex: 1; min-height: 0; } .deck { display: flex; gap: 1.25rem; height: 100%; align-items: stretch; padding: .85rem 0; will-change: transform; } .deck .col { flex: 0 0 clamp(280px, 92vw, 520px); container-type: inline-size; /* densité : compaction selon la largeur réelle de la colonne, pas l'écran */ /* Tokens fluides liés à la largeur de la colonne (cqi = 1% de l'inline-size du conteneur). Compaction CONTINUE : colonne étroite → moins de padding/gap, photo plus petite, pour « tenir » avant de devoir scroller. Bornés par clamp (min lisible / max actuel). */ --pad: clamp(0.95rem, 4.5cqi, 1.5rem); --gap: clamp(0.4rem, 1.7cqi, 0.7rem); --photo: clamp(60px, 22cqi, 104px); height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox : pas de scrollbar (base ; barre overlay réactivée au hover plus bas) */ opacity: .55; transition: box-shadow .4s ease; display: flex; flex-direction: column; transform-origin: center center; will-change: transform, opacity; border-radius: var(--radius); } .deck .col:not(.active) { cursor: pointer; } .deck .col > .card { margin: auto 0; } /* centre verticalement (sticke en haut si trop grand) */ /* Titre de la colonne active (affiché entre le header et le deck) */ .deck-title { padding-top: .75rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; min-height: 1.6rem; } /* Chevron « retour au Menu » : icône cliquable en haut à gauche de la colonne, couleur d'accent Milo. Injecté dans chaque colonne (sauf Menu). */ .deck-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 0 .4rem -.35rem; background: none; border: none; padding: 0; border-radius: var(--r-sm); color: var(--accent-ink); cursor: pointer; transition: background .15s, transform .1s; } .deck-back:hover { background: var(--accent-soft); } .deck-back:active { transform: scale(.9); } .deck-back:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } /* Colonne « Menu » : lanceur d'actions (grille bento). */ .menu-head { margin-bottom: 1.1rem; } .menu-eyebrow { margin: 0 0 .1rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .menu-title { margin: 0; font-size: 1.3rem; font-weight: 700; } .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .menu-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; min-height: 116px; padding: .9rem; text-align: left; cursor: pointer; background: var(--inset); border: 1px solid var(--line); color: var(--fg); border-radius: var(--r-lg); transition: transform .12s ease, border-color .15s, background .15s, box-shadow .15s; } .menu-tile-ic { width: 44px; height: 44px; border-radius: var(--r-md); flex: none; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); } .menu-tile-ic svg { width: 22px; height: 22px; } .menu-tile-tt { margin-top: auto; font-size: .98rem; font-weight: 700; line-height: 1.1; } .menu-tile-sb { font-size: .76rem; color: var(--muted); } .menu-tile:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--inset)); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); } .menu-tile:active { transform: scale(.97); } .menu-tile:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; } .menu-badge { position: absolute; top: .7rem; right: .7rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; background: var(--danger, #ef4444); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.3); } @media (prefers-reduced-motion: reduce) { .menu-tile { transition: none; } .menu-tile:hover { transform: none; } } /* Milo en bas du Menu : représentation de face, animée (flotte + regard + clin d'œil). */ .menu-milo { margin-top: auto; display: flex; justify-content: center; padding-top: 1.5rem; } .menu-milo .milo { width: 110px; height: 110px; animation: milo-bob 4.5s ease-in-out infinite; transform-origin: 50% 92%; } .menu-milo .milo-look { animation: milo-look 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .menu-milo .milo-eyeball { animation: milo-blink 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes milo-bob { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-2deg); } } @keyframes milo-look { 0%,18% { transform: translateX(0); } 30%,48% { transform: translateX(-5px); } 62%,82% { transform: translateX(3px); } 100% { transform: translateX(0); } } @keyframes milo-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } } @media (prefers-reduced-motion: reduce) { .menu-milo .milo, .menu-milo .milo-look, .menu-milo .milo-eyeball { animation: none; } } /* Sélecteur de contact (tuiles Discuter / Passer un appel). */ .picker-panel { width: min(92vw, 380px); max-height: 80vh; display: flex; flex-direction: column; position: relative; } .picker-title { margin: 0; font-size: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; } .picker-title svg { color: var(--accent-ink); } .pick-search { width: 100%; margin-bottom: .6rem; padding: .55rem .7rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--fg); font-size: .9rem; } .pick-search:focus { outline: none; border-color: var(--accent-ink); } .picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .35rem; } .picker-item { display: flex; align-items: center; gap: .6rem; width: 100%; background: var(--inset); border: 1px solid var(--line); color: var(--fg); border-radius: var(--r-md); padding: .5rem .6rem; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; } .picker-item:hover { border-color: var(--accent-ink); background: var(--accent-soft); } .picker-item .meta { display: flex; flex-direction: column; min-width: 0; } .picker-item .nm { font-weight: 600; } .picker-item .hd { color: var(--muted); font-size: .8rem; } /* Cadenas/clé sur l'avatar : indique que le coffre E2E contient bien une clé. */ .vault-badge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--accent-strong); color: #fff; border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .vault-badge svg { width: 12px; height: 12px; } .photo-frame { position: relative; display: inline-flex; } /* Avatar cliquable (panneau Profil) → ouvre le sélecteur de photo. Pastille caméra révélée au survol, par-dessus la photo (le badge coffre reste visible hors survol). */ .photo-wrap[for] { cursor: pointer; } .photo-edit { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .15s var(--ease-out); } .photo-wrap[for]:hover .photo-edit, .photo-wrap[for]:focus-visible .photo-edit { opacity: 1; } /* Dernière connexion affichée sous le handle du profil. */ .last-seen { display: inline-flex; align-items: center; gap: .3rem; margin: .25rem 0 0; color: var(--muted); font-size: .78rem; } .last-seen svg { opacity: .8; } /* Branche de navigation, en bas (desktop ET mobile) */ .deck-branch { width: 100%; display: flex; justify-content: center; padding: .15rem 0 .45rem; flex: none; } /* ===================== Landing « moteur » (scroll vertical) ===================== La page d'accueil déconnectée n'utilise plus le deck horizontal : héros centré façon moteur de recherche, puis sections empilées atteignables via la barre d'ancres collante. Le deck reste réservé à l'éditeur privé / aux profils. */ #app[data-view="landing"] { justify-content: flex-start; } .landing { width: 100%; display: flex; flex-direction: column; align-items: center; } /* Héros : occupe ~le premier écran, tout est centré autour de la recherche. */ .lp-hero { width: 100%; max-width: 1120px; padding: clamp(1.5rem, 5vh, 3.5rem) 1.25rem 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 30vw, 350px); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); /* Première page plein écran : hauteur ajustée en JS (viewport − bandeau/topbar), avec repli CSS si JS indispo. */ min-height: 100svh; position: relative; } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; } /* Mockup de l'app, flottant, avec halo accent derrière. */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; justify-self: end; } .hero-visual::before { content: ""; position: absolute; inset: -6% -14%; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); pointer-events: none; } .hero-phone { position: relative; z-index: 1; width: 100%; height: auto; max-height: min(82svh, 760px); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); transform-origin: 50% 60%; } @media (prefers-reduced-motion: no-preference) { .hero-phone { animation: phone-float 7s ease-in-out infinite; } .hero-phone-shine { animation: phone-shine 5.5s ease-in-out 1.2s infinite; } } @keyframes phone-float { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-14px) rotate(1.6deg); } } @keyframes phone-shine { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 60% { transform: translateX(560px); opacity: 0; } 100% { transform: translateX(560px); opacity: 0; } } /* Rangée « disponible partout » (badges clients) sous le hero. */ .clients { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; max-width: 30rem; } .cli { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 60%, transparent); font-size: .82rem; color: var(--muted); } .cli .cli-ic { display: inline-flex; opacity: .8; } .cli em { font-style: normal; font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; padding: .08rem .38rem; border-radius: 999px; background: var(--line); color: var(--muted); } .cli.on { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .cli.on em { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-ink); } @media (max-width: 880px) { .clients { justify-content: center; } } /* Indice de défilement animé en bas du hero. */ .scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; color: var(--muted); opacity: .7; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .scroll-cue { animation: cue-bounce 1.8s ease-in-out infinite; } } @keyframes cue-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } } .lp-hero .hero-milo { margin-bottom: 1rem; } .lp-hero h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 .85rem; } .lp-hero h1 .accent { color: var(--accent-ink); } .lp-tagline { color: var(--muted); font-size: 1.05rem; max-width: 30rem; margin: 0 0 1.75rem; } .lp-hero .search { width: 100%; z-index: 5; margin-inline: 0; } .lp-hero .search-box { padding: .25rem .35rem .25rem 1.1rem; box-shadow: 0 12px 34px -20px rgba(0, 0, 0, .65); } .lp-hero .hero-actions { margin-top: 1.25rem; } .lp-hero .adoption { margin-top: 1.2rem; } /* Écrans étroits : on repasse en une colonne, texte centré, mockup sous le texte et plus compact (la première page n'est plus verrouillée à 100svh). */ @media (max-width: 880px) { .lp-hero { grid-template-columns: 1fr; justify-items: center; gap: 2rem; min-height: auto; padding-bottom: 4.5rem; } .hero-copy { align-items: center; text-align: center; } .hero-visual { order: 1; justify-self: center; } .hero-phone { max-height: 62svh; max-width: 280px; } } /* Barre d'ancres collante sous le header — navigation des sections. */ .lp-anchors { position: sticky; top: 0; z-index: 30; display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; width: 100%; padding: .55rem 1rem; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .lp-anchors a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: .88rem; font-weight: 500; border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; } .lp-anchors a:hover { color: var(--fg); background: var(--bg-soft); border-color: var(--line); } .lp-anchors a svg { flex: none; } /* Sections empilées, alternance de fond, ancrage sous la barre collante. */ .lp-section { width: 100%; display: flex; flex-direction: column; align-items: center; padding: clamp(2.5rem, 7vh, 4.5rem) 0; border-top: 1px solid var(--line); scroll-margin-top: 3.5rem; } .lp-section:nth-of-type(even) { background: var(--bg-soft); } .lp-section > .features { padding-top: 0; padding-bottom: 1.5rem; } /* Section « Tarifs & licence » — intégrée au flux (ex-page /pricing). */ .pricing { width: 100%; max-width: 960px; padding: 0 1.25rem; } .pr-lead { color: var(--muted); max-width: 46rem; margin: .4rem 0 0; } .pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 1.75rem 0 0; } .pr-plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; } .pr-plan.feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .pr-plan h3 { margin: 0; font-size: 1.1rem; } .pr-price { font-size: 1.5rem; font-weight: 700; } .pr-plan ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; } .pr-plan li { margin: .25rem 0; } .pr-cta { margin-top: auto; display: inline-block; width: 100%; text-align: center; padding: .6rem 1rem; border-radius: var(--r-md); background: var(--accent); color: #0b0d12; font: inherit; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; } .pr-cta.ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); } /* Offre grand public : grille resserrée (2 plans) + prix mensuel + plan « populaire ». */ .pr-grid--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 640px; margin-inline: auto; } .pr-per { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .35rem; } .pr-plan.feat .pr-tag { color: #0b0d12; background: var(--accent); } /* Encart « Abonnement » de l'écran Options. */ .abo-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .abo-badge { font-weight: 700; padding: .2rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); } .abo-status.is-premium .abo-badge { background: var(--accent); color: #0b0d12; } .abo-until { color: var(--muted); font-size: .9rem; } /* Section « Espace privé » sur la page publique /@handle. Surface l'accès aux pages premium pour les abonnés ET propose le checkout pour les autres. */ .pub-space { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 4%, transparent); } .pub-space--open { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .pub-space-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; margin-bottom: .55rem; } .pub-space-head svg { color: var(--accent-ink); } .pub-space-edit { margin-left: auto; opacity: .75; text-decoration: none; font-weight: 500; } .pub-space-edit:hover { opacity: 1; text-decoration: underline; } .pub-space-desc { font-size: .88rem; color: var(--muted); margin: 0 0 .65rem; } .pub-space-pages { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .pub-space-page { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border-radius: var(--r-sm); background: var(--bg-soft); text-decoration: none; color: inherit; transition: background .15s, transform .15s; } .pub-space-page:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft)); transform: translateX(2px); } .pub-space-title { flex: 1; font-weight: 500; } .pub-space-arrow { opacity: .55; } .pub-space-page-locked { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 50%, transparent); color: var(--muted); font-size: .9rem; opacity: .85; } .pub-space-cta { width: 100%; justify-content: center; } /* ==== Bouton « ← Retour » unifié ==== Touch target ≥44×44, label visible, focus ring conservé. Comportement : history.back() si la page précédente est même origine, sinon fallback vers data-fallback. */ .back-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem .95rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-soft); color: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; } .back-btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-soft)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .back-btn:active { transform: translateX(-1px); } .back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .back-btn svg { flex-shrink: 0; } /* ==== Page index « Espace privé » /@handle/space ==== Layout responsive : container 1100px max, hero deux colonnes (id+CTA) sur ≥760px, grille de cartes auto-fill 1→3 colonnes selon largeur. */ .spx { max-width: 1100px; margin: 1.25rem auto 2.5rem; padding: 0 1.25rem; } .spx-topbar { margin-bottom: 1.25rem; } /* Hero : avatar + identité à gauche, CTA à droite (collapse en mobile). */ .spx-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items: center; padding: 1.5rem; border-radius: var(--r-md); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); margin-bottom: 1.5rem; } .spx-hero-id { display: flex; align-items: center; gap: 1.1rem; min-width: 0; } .spx-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg); border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); } .spx-avatar-milo, .spx-avatar-gen { display: flex; align-items: center; justify-content: center; } .spx-hero-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .spx-hero-eyebrow { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); } .spx-hero-title { margin: 0; font-size: 1.7rem; line-height: 1.15; } .spx-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .15rem 0 0; color: var(--muted); font-size: .92rem; } .spx-hero-meta a { color: inherit; text-decoration: none; } .spx-hero-meta a:hover { text-decoration: underline; } .spx-price { font-weight: 600; color: var(--accent-ink); } .spx-hero-cta { justify-self: end; display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; max-width: 320px; } .spx-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; min-height: 48px; /* touch-target-size */ font-size: 1rem; font-weight: 600; white-space: nowrap; } .spx-cta[disabled], .spx-cta[aria-busy="true"] { opacity: .8; cursor: wait; } .spx-cta .spx-cta-main b { font-weight: 800; } .spx-cta-sub { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--muted); text-align: right; max-width: 280px; } /* Statut « accès débloqué » / placeholder */ .spx-status { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 999px; font-size: .88rem; color: var(--muted); background: var(--bg-soft); } .spx-status--ok { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft)); } /* Grille de pages : 1→3 colonnes selon la largeur. */ .spx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; } .spx-card { position: relative; display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-soft); color: inherit; text-decoration: none; min-height: 64px; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; } .spx-card:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-soft)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-1px); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 12%, transparent); } .spx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .spx-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); flex-shrink: 0; } .spx-card-title { flex: 1; font-weight: 600; min-width: 0; word-break: break-word; } .spx-card-arrow { opacity: .55; font-size: 1.15rem; flex-shrink: 0; } .spx-card:hover .spx-card-arrow { opacity: 1; transform: translateX(2px); } .spx-card.is-draft { border-style: dashed; opacity: .85; } .spx-card-badge { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 4px; background: color-mix(in srgb, var(--muted) 28%, transparent); color: var(--muted); } .spx-card--locked { color: var(--muted); cursor: default; } .spx-card--locked:hover { background: var(--bg-soft); border-color: var(--line); transform: none; box-shadow: none; } .spx-card-lock { color: var(--muted); } .spx-grid--teaser .spx-card { opacity: .85; } /* État vide (créateur sans page). */ .spx-empty { text-align: center; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 480px; margin: 1rem auto 0; } .spx-empty h1 { margin: 0; } .spx-empty .subtitle { margin: 0; color: var(--muted); } /* Mobile : hero en pile, CTA pleine largeur. */ @media (max-width: 720px) { .spx-hero { grid-template-columns: 1fr; padding: 1.25rem; } .spx-hero-cta { justify-self: stretch; align-items: stretch; max-width: none; } .spx-cta { width: 100%; justify-content: center; } .spx-cta-sub { text-align: center; max-width: none; } .spx-hero-title { font-size: 1.45rem; } .spx-avatar { width: 64px; height: 64px; } } @media (max-width: 480px) { .spx { padding: 0 1rem; } .spx-grid { grid-template-columns: 1fr; } } /* Conteneur page payante (réutilise .spx + .pp-view). */ .spx .pp-view { margin: 0; max-width: none; } /* ── Rendu type-aware des pages premium (renderPaidPageContent) ─────────── */ .pp-empty { text-align: center; color: var(--muted); padding: 1.5rem 0; } /* Lien externe */ .pp-link { display: flex; flex-direction: column; gap: .75rem; } .pp-link-note { margin: 0; color: var(--fg); white-space: pre-wrap; } .pp-link-cta { align-self: flex-start; } /* Galerie publique : grille fluide, items cliquables, lightbox au clic. */ .pp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .55rem; } .pp-gal-item { position: relative; display: block; aspect-ratio: 1 / 1; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); transition: transform .15s, box-shadow .15s; } .pp-gal-item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.25); } .pp-gal-item img, .pp-gal-item video { width: 100%; height: 100%; object-fit: cover; display: block; } .pp-gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .5rem; font-size: .75rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); text-align: left; } /* Fichier téléchargeable */ .pp-file { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-soft); } .pp-file-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); flex-shrink: 0; } .pp-file-body { flex: 1; min-width: 0; } .pp-file-body b { display: block; word-break: break-word; } .pp-file-size { color: var(--muted); font-size: .85rem; } /* Markdown léger */ .pp-markdown h1, .pp-markdown h2, .pp-markdown h3 { margin: 1.25rem 0 .5rem; } .pp-markdown h1 { font-size: 1.5rem; } .pp-markdown h2 { font-size: 1.25rem; } .pp-markdown h3 { font-size: 1.05rem; } .pp-markdown p { margin: .55rem 0; line-height: 1.55; } .pp-markdown ul { margin: .55rem 0 .55rem 1.25rem; padding-left: .8rem; } .pp-markdown li { margin: .25rem 0; } .pp-markdown strong { color: var(--accent-ink); } /* ── Wizard : type Fichier (carte état uploadé / vide) ───────────────────── */ .pp-file-state { margin: .25rem 0; } .pp-file-card { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-soft); } .pp-file-card .pp-file-ic { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 18%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); flex-shrink: 0; } .pp-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pp-file-info b { word-break: break-word; } .pp-file-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.25rem; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 50%, transparent); } .pp-file-empty .pp-file-ic { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; } .pp-file-empty p { margin: 0; color: var(--muted); font-size: .9rem; } /* Indication d'usage du calendrier public (visiteur) — remplace l'ancien bouton « Demander un RDV ». Le RDV se prend en cliquant un jour libre. */ .cal-hint { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); color: var(--fg); font-size: .9rem; line-height: 1.4; } .cal-hint svg { flex-shrink: 0; color: var(--accent-ink); } .pub-space-draft { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 4px; background: color-mix(in srgb, var(--muted) 30%, transparent); color: var(--muted); } .pub-space-page.is-draft { opacity: .8; border: 1px dashed color-mix(in srgb, var(--muted) 30%, var(--line)); } /* Couverture vidéo (Premium P4) : remplit le hero comme une image background-cover. inset:0 hérité de .pub-cover-bg ne suffit pas — sans width/height explicites le