@import './tokens.css'; *, *::before, *::after { box-sizing: border-box; } /* iOS Safari zoome au focus dès qu'un champ a une font-size < 16px. On force 16px sur tous les champs focusables pour neutraliser ce zoom. */ input, textarea, select { font-size: 16px; } html { margin: 0; padding: 0; background: var(--bg); /* color-scheme is set per theme in tokens.css (:root / [data-theme="light"]) */ /* « Chin gap » iOS PWA : 100dvh/100svh/inset:0 = petit viewport → bande en bas. 100vh = plein écran réel. Cf. body. */ height: 100vh; } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); /* position: fixed + inset: 0 is the canonical iOS PWA approach — avoids the -webkit-fill-available trap that makes fixed children anchor to body instead of viewport. ⚠️ « Chin gap » : en PWA installée iOS, inset:0 / 100svh / 100dvh se calent sur le PETIT viewport → bande de fond en bas. 100vh = le GRAND viewport = plein écran (fix communauté). bottom:auto pour que height:100vh pilote, sans sur-contrainte. */ position: fixed; inset: 0; bottom: auto; height: 100vh; overflow: hidden; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } /* Hide scrollbars globally */ ::-webkit-scrollbar { width: 0; height: 0; display: none; } * { scrollbar-width: none; } #desktop-nav { display: none; } #app { position: fixed; inset: 0; bottom: auto; height: 100vh; /* plein écran réel — cf. body (fix « chin gap ») */ overflow: hidden; } /* Screen container */ .screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: var(--bg); } .screen.hidden { display: none; } /* ── Transitions de page (View Transitions API) ────────────────────────────── Le routeur (js/app.js) pose data-nav-dir sur avant chaque navigation : « forward » (entrée sous-écran) · « back » (retour) · « fade » (onglet). Les barres de navigation sont capturées à part pour ne pas glisser. */ #bottom-nav { view-transition-name: bottom-nav; } #desktop-nav { view-transition-name: desktop-nav; } @keyframes vt-in-right { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } } @keyframes vt-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-16px); } } @keyframes vt-in-left { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } } @keyframes vt-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } } html[data-nav-dir="forward"]::view-transition-old(root) { animation: vt-out-left 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } html[data-nav-dir="forward"]::view-transition-new(root) { animation: vt-in-right 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; } html[data-nav-dir="back"]::view-transition-old(root) { animation: vt-out-right 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } html[data-nav-dir="back"]::view-transition-new(root) { animation: vt-in-left 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; } html[data-nav-dir="fade"]::view-transition-old(root) { animation: vt-fade-out 0.16s ease both; } html[data-nav-dir="fade"]::view-transition-new(root) { animation: vt-fade-in 0.22s ease both; } /* Les navs ne glissent pas : fondu doux en place (l'onglet actif change). */ ::view-transition-old(bottom-nav), ::view-transition-new(bottom-nav), ::view-transition-old(desktop-nav), ::view-transition-new(desktop-nav) { animation-duration: 0.2s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Bottom nav — capsule flottante (mobile). Détachée des bords pour laisser le contenu filer en plein écran derrière : le wrapper ne capte pas les clics, seule la capsule est interactive. */ #bottom-nav { /* fixed ; bottom:0 = bas du viewport (au-dessus de la zone home indicator). Le plein écran réel est géré par body/#app en 100vh (fix « chin gap ») ; la capsule garde sa position flottante naturelle, le contenu file derrière. */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: center; pointer-events: none; /* Offset bas = env(safe-area-inset-bottom) pour que la capsule se pose AU-DESSUS de la barre home indicator (≈34px sur iPhone) ; 14px ailleurs (preview/desktop, pas de home indicator). La divergence preview/device est ici VOULUE et correcte. */ padding: 0 16px max(14px, env(safe-area-inset-bottom)); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Masquée : glisse sous le bord (140% pour emporter aussi l'ombre). */ #bottom-nav.hidden { transform: translateY(140%); } /* Dégradé de fond derrière la capsule : le contenu se fond dans le fond au ras du bas (sinon il est tranché net sous la barre flottante — affiches/blocs coupés). Sous le niveau de la capsule, au-dessus du contenu qui défile. */ #bottom-nav::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; /* Voile très court et léger : le contenu défile derrière la capsule (verre dépoli) et reste net quasi jusqu'au bord — ce dégradé adoucit juste le ras du bord, il ne doit PAS recréer une bande vide. Hauteur FIXE. */ height: 40px; background: linear-gradient( to top, color-mix(in srgb, var(--bg) 65%, transparent) 0%, transparent 100% ); pointer-events: none; z-index: -1; } /* La barre cachée emporte aussi son dégradé. */ #bottom-nav.hidden::before { opacity: 0; transition: opacity 0.2s ease; } .nav-tabs { pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; padding: 6px; background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); } /* Repli si le verre dépoli n'est pas supporté : surface opaque. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav-tabs { background: var(--surface); } } .nav-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; padding: 6px 14px; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--muted); transition: color 0.18s; font-family: var(--font-body); } .nav-tab.active { color: var(--accent); } .nav-tab span { font-size: 10px; font-weight: 600; font-family: var(--font-body); } /* Capsule mobile : icône seule par défaut ; l'onglet actif s'étend en pilule teintée or avec son label. Scopé à #bottom-nav (la sidebar desktop garde son propre traitement). */ #bottom-nav .nav-tab { flex-direction: row; align-items: center; gap: 0; height: 46px; min-width: 0; min-height: 46px; padding: 0 13px; border-radius: var(--radius-full); white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color 0.24s, background 0.24s, padding 0.34s cubic-bezier(0.16, 1, 0.3, 1), transform 0.14s ease-out; } /* Feedback de pression : l'onglet tapé s'enfonce brièvement (tactile, instantané). */ #bottom-nav .nav-tab:active { transform: scale(0.9); } #bottom-nav .nav-tab svg { flex-shrink: 0; } #bottom-nav .nav-tab span { font-size: 12px; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; transition: max-width 0.36s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease; } #bottom-nav .nav-tab.active { background: var(--accent-bg2); } #bottom-nav .nav-tab.active span { max-width: 96px; margin-left: 7px; opacity: 1; } @media (prefers-reduced-motion: reduce) { #bottom-nav, #bottom-nav .nav-tab, #bottom-nav .nav-tab span { transition: none; } #bottom-nav .nav-tab:active { transform: none; } } /* Auth screen */ #auth-screen { position: fixed; inset: 0; bottom: auto; height: 100vh; /* plein écran réel — cf. body (fix « chin gap ») */ display: flex; flex-direction: column; align-items: center; justify-content: safe center; /* centré, mais le haut reste atteignable si ça déborde */ overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); z-index: 200; padding: max(40px, env(safe-area-inset-top)) var(--px) max(40px, env(safe-area-inset-bottom)); } .auth-logo { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 36px; } .auth-logotype { display: flex; align-items: center; gap: 9px; } .auth-logotype-name { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--text); } .auth-logotype-badge { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--bg); background: var(--accent); padding: 3px 9px; border-radius: 20px; } .auth-tagline { font-size: 15px; color: var(--muted); text-align: center; line-height: 1.5; margin-bottom: 26px; } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 320px; padding: 15px 20px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer; margin-bottom: 12px; transition: background 0.18s, border-color 0.18s; min-height: 56px; } .auth-btn:active { background: var(--surface3); } .auth-btn-google { border-color: var(--border); } .auth-btn-apple { border-color: var(--border); } /* ── Email / mot de passe ─────────────────────────────────────────────────── */ .auth-divider { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 320px; margin: 4px 0 14px; color: var(--meta); font-size: 13px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; } .auth-field { position: relative; } .auth-input { width: 100%; box-sizing: border-box; min-height: 56px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 16px; /* 16px : empêche le zoom auto d'iOS au focus */ -webkit-appearance: none; appearance: none; transition: border-color 0.18s, background 0.18s; } .auth-input::placeholder { color: var(--meta); } .auth-input:focus { outline: none; border-color: var(--accent-border2); background: var(--surface2); } .auth-input:read-only { color: var(--muted); background: var(--surface); } .auth-field-pw .auth-input { padding-right: 50px; } .auth-pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 50px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--meta); cursor: pointer; } .auth-pw-toggle:active, .auth-pw-toggle.on { color: var(--accent); } /* Soumission — action, mais l'or recule : tinté plutôt que plein (cf. brand). */ .auth-btn-submit { margin-top: 4px; margin-bottom: 0; border-color: var(--accent-border2); background: var(--accent-bg2); color: var(--accent); } .auth-btn-submit:active { background: var(--accent-bg3); } .auth-btn-submit:disabled { opacity: 0.55; pointer-events: none; } .auth-link { background: none; border: none; padding: 8px 2px; font-family: var(--font-body); font-size: 14px; color: var(--muted); cursor: pointer; } .auth-link-strong { color: var(--accent); font-weight: 600; } .auth-forgot { align-self: flex-end; width: 100%; max-width: 320px; text-align: right; margin-top: 2px; } .auth-switch { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--muted); } /* Bandeau d'info (liaison de compte Google ↔ mot de passe). */ .auth-msg { width: 100%; max-width: 320px; margin-bottom: 12px; padding: 11px 14px; border-radius: var(--radius-md); background: var(--accent-bg2); border: 1px solid var(--accent-border); color: var(--text-secondary); font-size: 13.5px; line-height: 1.45; text-align: center; } /* Auth optimiste : pendant la revalidation du token (retour d'un utilisateur déjà connecté), on masque CTA + tagline + formulaire pour ne montrer que le splash animé. JS retire `auth-pending` si Firebase résout vers « non connecté ». */ html.auth-pending #auth-screen .auth-tagline, html.auth-pending #auth-screen .auth-btn, html.auth-pending #auth-screen .auth-divider, html.auth-pending #auth-screen .auth-msg, html.auth-pending #auth-screen .auth-form, html.auth-pending #auth-screen .auth-forgot, html.auth-pending #auth-screen .auth-switch { display: none; } /* Brand mark uses the themed accent (antique gold in light mode), overriding the hardcoded stroke on the inline SVGs. */ #auth-screen .auth-logo svg path, .desktop-nav-brand svg path { stroke: var(--accent); } /* ── Onboarding premier lancement ─────────────────────────────────────────── */ .onboarding { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--bg); padding: env(safe-area-inset-top) 0 0; overscroll-behavior: contain; } .ob-top { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--px) 4px; } .ob-brand { display: flex; align-items: center; gap: 8px; } .ob-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--text); } .ob-brand-badge { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; color: var(--on-accent); background: var(--accent); padding: 2px 6px; border-radius: var(--radius-pill); margin-left: 4px; } .ob-skip { background: none; border: none; color: var(--muted); font-family: var(--font-body); font-weight: 500; font-size: 14px; cursor: pointer; padding: 10px 8px; margin-right: -4px; min-height: 44px; -webkit-tap-highlight-color: transparent; } .ob-skip:active { color: var(--text); } .ob-viewport { flex: 1; min-height: 0; overflow: hidden; } .ob-track { display: flex; height: 100%; will-change: transform; transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1); } .ob-panel { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 8px 28px 12px; box-sizing: border-box; } .ob-art { width: 100%; max-width: 360px; height: 296px; display: flex; align-items: center; justify-content: center; } .ob-copy { max-width: 360px; text-align: center; } .ob-kicker { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--accent); margin: 0 0 8px; } .ob-title { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.06; letter-spacing: 0.005em; color: var(--text); margin: 0; text-wrap: balance; } .ob-sub { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; text-wrap: pretty; } .ob-bottom { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--px) max(16px, env(safe-area-inset-bottom)); } .ob-dots { display: flex; align-items: center; gap: 7px; } .ob-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--faint); transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1), background 0.34s; } .ob-dot.is-on { width: 22px; background: var(--accent); } .ob-next { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--on-accent); background: var(--accent); border: none; border-radius: var(--radius-full); padding: 13px 26px; min-height: 50px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.18s; } .ob-next:active { opacity: 0.85; } .ob-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Dioramas — fragments réels de l'UI Myna (pas d'icônes génériques). */ .ob-d { width: 100%; height: 100%; display: flex; } /* Volet 1 — Suivre : affiche + rangées d'épisodes */ .ob-d-track { align-items: center; justify-content: center; gap: 22px; } .ob-poster { flex: 0 0 122px; aspect-ratio: 2 / 3; border-radius: 14px; position: relative; overflow: hidden; box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.72); } .ob-poster-tag { position: absolute; top: 9px; left: 9px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: var(--on-media); background: rgba(0, 0, 0, 0.42); padding: 3px 7px; border-radius: 7px; } .ob-poster-prog { position: absolute; left: 9px; right: 9px; bottom: 10px; height: 4px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.42); overflow: hidden; } .ob-poster-prog > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .ob-eps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; } .ob-ep { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 11px; border-radius: 9px; background: var(--surface2); border: 1px solid var(--border-subtle); } .ob-ep-check { flex: 0 0 18px; height: 18px; border-radius: var(--radius-full); border: 1.5px solid var(--accent); background: var(--accent); position: relative; } .ob-ep-check::after { content: ''; position: absolute; left: 5px; top: 3.5px; width: 4px; height: 7px; border: solid var(--on-accent); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); } .ob-ep-line { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--surface3); } .ob-ep:nth-child(2) .ob-ep-line { flex: none; width: 72%; } .ob-ep.is-next .ob-ep-line { flex: none; width: 50%; } .ob-ep.is-next .ob-ep-check { background: transparent; border-color: var(--faint); } .ob-ep.is-next .ob-ep-check::after { display: none; } /* Volet 2 — Vidéothèque : grille d'affiches + répartition */ .ob-d-grid { flex-direction: column; align-items: center; justify-content: center; gap: 22px; } .ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 252px; } .ob-tile { aspect-ratio: 2 / 3; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.72); } .ob-tile::after { content: ''; position: absolute; left: 7px; bottom: 7px; width: 56%; height: 4px; border-radius: var(--radius-full); background: rgba(239, 235, 226, 0.42); } .ob-splitwrap { width: 100%; max-width: 252px; } .ob-splitbar { display: flex; height: 9px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface3); } .ob-split-films { background: var(--accent); } .ob-split-series { flex: 1; background: color-mix(in srgb, var(--text-secondary) 55%, transparent); } .ob-split-legend { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--meta); } .ob-split-legend span { display: inline-flex; align-items: center; } .ob-dotc { width: 7px; height: 7px; border-radius: var(--radius-full); margin-right: 6px; } .ob-dotc.lf { background: var(--accent); } .ob-dotc.ls { background: color-mix(in srgb, var(--text-secondary) 55%, transparent); } /* Volet 3 — Sorties & amis : chips de dates + avatars */ .ob-d-cal { flex-direction: column; align-items: center; justify-content: center; gap: 28px; } .ob-chips { display: flex; gap: 11px; } .ob-chip { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0; border-radius: 13px; background: var(--surface2); border: 1px solid var(--border-subtle); } .ob-chip-d { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meta); } .ob-chip-n { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1; color: var(--text); } .ob-chip.is-soon { background: var(--accent-bg2); border-color: var(--accent-border2); } .ob-chip.is-soon .ob-chip-n { color: var(--accent); } .ob-friends { display: flex; align-items: center; } .ob-av { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--on-media); border: 2px solid var(--bg); margin-left: -10px; } .ob-av:first-child { margin-left: 0; } .ob-av-more { background: var(--surface3); color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 13px; } /* Volet 4 — Installer : écran d'accueil avec l'icône Myna fraîchement ajoutée */ .ob-d-install { flex-direction: column; align-items: center; justify-content: center; gap: 26px; } .ob-homerow { display: flex; gap: 14px; opacity: 0.55; } .ob-htile { width: 52px; height: 52px; border-radius: 13px; background: var(--surface3); border: 1px solid var(--border-subtle); } .ob-appwrap { display: flex; flex-direction: column; align-items: center; gap: 11px; } .ob-appicon { position: relative; width: 84px; height: 84px; border-radius: 21px; /* squircle iOS ~25 % */ /* tuile sombre fixe — comme les scrims d'affiches, non thémée */ background: #0F1E25; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.72); } .ob-appicon svg { width: 56px; height: 56px; } .ob-appicon-add { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1; border: 2px solid var(--bg); } .ob-applabel { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text); } @media (prefers-reduced-motion: reduce) { .ob-track, .ob-dot { transition: none; } } /* Toast */ #toast-container { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--surface3); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: var(--radius-md); white-space: nowrap; animation: toastIn 0.22s ease forwards; backdrop-filter: blur(8px); } .toast.success { border-color: var(--accent-border); color: var(--accent); } .toast.error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } /* Loading — bird spinner (state 03 du kit Myna) */ .loading-spinner { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; } /* Oiseau centré (data URI, statique) */ .loading-spinner::before { content: ''; display: block; width: 50%; height: 44%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='148 78 240 216' overflow='visible'%3E%3Cpath d='M309.67 135.426H309.774M163.825 270.832L275.501 111.467C280.581 104.189 287.854 98.7239 296.258 95.8672C304.662 93.0105 313.759 92.9118 322.223 95.5856C330.688 98.2594 338.077 103.566 343.314 110.732C348.552 117.898 351.363 126.549 351.34 135.424V166.672C351.34 188.772 342.56 209.967 326.93 225.594C311.301 241.221 290.103 250 268 250H178.409M351.34 135.424L372.175 140.634L351.34 145.842M247.165 250.002V281.25M288.835 247.398V281.25M215.912 249.998C228.758 249.998 241.292 246.04 251.808 238.663C262.324 231.286 270.312 220.848 274.683 208.771C279.055 196.693 279.599 183.562 276.241 171.165C272.883 158.767 265.786 147.705 255.916 139.485' fill='none' stroke='%23C9A84C' stroke-width='14' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Anneau orbital rotatif */ .loading-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--accent); border-right-color: color-mix(in srgb, var(--accent) 30%, transparent); animation: spinRing var(--myna-dur-spin, 1.6s) linear infinite; } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; gap: 12px; } .empty-state-icon { font-size: 48px; opacity: 0.3; } .empty-state-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); } .empty-state-sub { font-size: 13px; color: var(--muted); line-height: 1.5; } /* Animations */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 50% { opacity: 0; } } .fade-up { animation: fadeUp 0.3s ease forwards; } /* ─── Desktop adaptation (≥ 768px) ─────────────────────── */ @media (min-width: 768px) { :root { --px: 32px; --pt: 32px; --pb: 40px; } /* Remove the iOS safe-area filler — not needed on desktop */ body::after { display: none; } /* Sidebar */ #desktop-nav { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: max(0px, calc((100vw - 840px) / 2)); width: 200px; background: var(--bg); border-right: 1px solid var(--border-subtle); z-index: 90; } .desktop-nav-brand { display: flex; align-items: center; gap: 10px; padding: 28px 20px 22px; border-bottom: 1px solid var(--border-faint); margin-bottom: 8px; } .desktop-nav-brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.05em; color: var(--text); line-height: 1; display: flex; align-items: baseline; gap: 6px; } .desktop-nav-brand-badge { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-dim); padding: 2px 5px; border-radius: 4px; } .desktop-nav-items { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; } /* Override bottom-nav tab styles for desktop sidebar */ #desktop-nav .nav-tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; width: 100%; min-height: 44px; border-radius: 8px; font-size: 14px; } #desktop-nav .nav-tab span { font-size: 14px; font-weight: 500; } #desktop-nav .nav-tab:hover { color: var(--text-secondary); background: color-mix(in srgb, var(--text) 5%, transparent); } #desktop-nav .nav-tab.active { color: var(--accent); background: var(--accent-dim); } #desktop-nav .nav-tab.active:hover { background: var(--accent-dim2); } /* App shell — offset by sidebar, max-width for readability */ #app { left: calc(max(0px, calc((100vw - 840px) / 2)) + 200px); right: auto; width: min(640px, calc(100vw - 200px)); } /* Hide mobile bottom nav */ #bottom-nav { display: none !important; } } /* ─── Theme switcher (Profil) ──────────────────────────── */ .theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; } .theme-seg-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 12px; cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s; -webkit-tap-highlight-color: transparent; } .theme-seg-btn svg { width: 19px; height: 19px; } .theme-seg-btn:active { opacity: 0.8; } .theme-seg-btn.active { background: var(--accent-bg2); border-color: var(--accent-border); color: var(--accent); } .theme-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── Profil — écran compte ────────────────────────────── */ .profile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .profile-title { font-family: var(--font-display); font-weight: 800; font-size: 31px; letter-spacing: 0.01em; color: var(--text); margin: 0; } .profile-gear { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.18s, border-color 0.18s; } .profile-gear:active { color: var(--accent); border-color: var(--accent-border); } .profile-gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .profile-identity { display: flex; align-items: center; gap: 16px; margin-top: 18px; } .profile-avatar-wrap { position: relative; flex-shrink: 0; width: 76px; height: 76px; } .profile-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--surface3); border: 2px solid var(--accent); overflow: hidden; display: flex; align-items: center; justify-content: center; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-avatar > span { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--accent); } .profile-avatar-sync { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--surface2); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .profile-avatar-sync:active { background: var(--accent); color: var(--on-accent); } .profile-identity-text { min-width: 0; } /* Sélecteur de couleur d'avatar (comptes sans photo) — aperçu = l'initiale sur chaque couleur de palette, pour distinguer les teintes (volontairement sombres). */ .avatar-colors-block { margin: 18px 0 4px; } .avatar-colors-label { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--meta); margin-bottom: 10px; } .avatar-colors { display: flex; flex-wrap: wrap; gap: 12px; } .avatar-color { width: 44px; height: 44px; border-radius: 50%; border: none; font-family: var(--font-display); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.18s ease; } .avatar-color:active { transform: scale(0.92); } .avatar-color.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } .avatar-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .profile-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text); line-height: 1; word-break: break-word; } .profile-meta { font-size: 13px; color: var(--muted); margin-top: 7px; } .account-section-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; color: var(--text); margin: 34px 0 12px; } .account-rows { display: flex; flex-direction: column; gap: 8px; } .account-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 13px 14px; background: var(--surface2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text); font-family: var(--font-body); font-size: 14px; text-align: left; -webkit-tap-highlight-color: transparent; } button.account-row { cursor: pointer; } button.account-row:active { background: var(--surface3); } .account-row-label { font-size: 14px; color: var(--text); } .account-row-val { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; min-width: 0; } .account-row-val svg { flex-shrink: 0; color: var(--faint); } .account-row-value-text { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-row--readonly { cursor: default; } .account-row-val--muted { color: var(--muted); } .account-row-val--muted svg { color: var(--muted); } .account-row--editable { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; } .account-row--editable.open { border-color: var(--accent-border); } .account-row-main { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 13px 14px; background: none; border: none; color: var(--text); font-family: var(--font-body); font-size: 14px; text-align: left; cursor: pointer; } .account-row-main:active { background: var(--surface3); } .account-row-main .account-row-val svg { transition: transform 0.2s ease; } .account-row--editable.open .account-row-main .account-row-val svg { transform: rotate(90deg); } .name-editor { padding: 4px 14px 14px; border-top: 1px solid var(--border-subtle); } .name-editor input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px; color: var(--text); font-family: var(--font-body); outline: none; margin-top: 12px; transition: border-color 0.18s; } .name-editor input:focus { border-color: var(--accent-border2); } .name-editor input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .name-editor input::placeholder { color: var(--muted); } .name-editor-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } .name-editor-cancel, .name-editor-save { min-height: 44px; padding: 0 18px; border-radius: 9px; font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .name-editor-cancel { background: none; border: 1px solid var(--border); color: var(--muted); } .name-editor-save { background: var(--accent); border: none; color: var(--on-accent); } .name-editor-save:disabled { opacity: 0.6; cursor: default; } .name-editor-cancel:active, .name-editor-save:active { opacity: 0.82; } .account-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 12px 2px 0; } .profile-logout { width: 100%; margin-top: 40px; background: none; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; min-height: 48px; -webkit-tap-highlight-color: transparent; transition: color 0.18s, border-color 0.18s; } .profile-logout:active { color: var(--text); border-color: var(--accent-border); } @media (prefers-reduced-motion: reduce) { .account-row-main .account-row-val svg, .profile-gear { transition: none; } }