/* ═══════════════════════════════════════════════════════════════════════════ Secret Agency — App Shell v2 (ss-app.css) Grammaire "smartphone premium / iOS" par-dessus le design system existant. — Chargé APRÈS secret-story.css, uniquement sur les pages migrées. — Ne redéfinit AUCUNE couleur de marque : réutilise --cyan/--fuchsia/--night… — Opt-in : les composants ne s'appliquent qu'aux classes .ss-* / [data-ss-shell]. Rien ici ne peut casser une page non migrée (aucun sélecteur global agressif). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Rayons (coins arrondis type iOS) ── */ --r-card: 22px; --r-sheet: 28px; --r-row: 14px; --r-pill: 999px; --r-tile: 18px; /* ── Échelle d'espacement (multiples de 4) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ── Mouvement ── */ --dur-press: 120ms; --dur-view: 320ms; --ease-spring: cubic-bezier(.32, 1.4, .55, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); /* ── Zones sûres (encoche / home bar iPhone) ── */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* ── Chrome de l'app ── */ --tabbar-h: 66px; /* hauteur barre d'onglets (hors safe-area) */ --header-h: 52px; /* hauteur en-tête compact */ --app-max: 440px; /* largeur "téléphone" (mobile / menu) */ --app-wide: 960px; /* colonne de contenu en plein écran desktop */ /* ── Contraste renforcé (le --text-mid legacy .58 est trop faible) ── */ --text-mid-strong: rgba(196, 216, 248, 0.82); /* ── Typo UI : stack système = rendu natif iPhone (SF Pro), zéro téléchargement ── */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; --font-display: 'Barlow Condensed', var(--font-ui); /* ── Ombres douces (vs bordures HUD dures) ── */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.34); --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.48); /* ── Thème "constellation" (2026-07-17) ── Fond #050743 + étoiles/nébuleuses ; cadres = fond #231930 @30% + bordure violet→bleu. */ --hairline: rgba(140, 130, 255, 0.34); /* teinte violet-bleu des cadres */ --frame-fill: rgba(35, 25, 48, 0.3); /* #231930 à 30% */ --frame-grad: linear-gradient(135deg, #7b2fff, #2979ff); /* violet → bleu */ --surface-1: rgba(35, 25, 48, 0.3); --surface-2: rgba(35, 25, 48, 0.3); /* ── Verre des barres (assez transparent pour laisser voir le flou = vrai "frosted glass" iOS ; le contenu défile visiblement dessous) ── */ --glass-chrome: rgba(7, 10, 32, 0.55); --glass-chrome-2: rgba(7, 10, 32, 0.42); } /* ═══════════════════════════════════════════════════════════════════════════ 1. Réglages globaux "app native" — s'appliquent quand ═══════════════════════════════════════════════════════════════════════════ */ body[data-ss-shell] { font-family: var(--font-ui); overscroll-behavior-y: none; /* pas de bounce/rubber-band parasite */ -webkit-tap-highlight-color: transparent; /* pas de flash bleu au tap */ -webkit-text-size-adjust: 100%; color-scheme: dark; /* clavier iOS + contrôles natifs en sombre */ /* (espace tab bar + défilement gérés par #ss-scroll — modèle "shell fixe") */ /* Fond nébuleuse occulte : violet-noir profond + nappes violettes diffuses + étoiles + vignette sombre sur les bords (fidèle au concept art talismans). (spécificité body[attr] > body inline des pages → remplace leur fond) */ background-color: #0a0318; background-image: radial-gradient(ellipse 125% 95% at 50% 42%, transparent 52%, rgba(2,0,10,0.72) 100%), radial-gradient(ellipse 74% 24% at 16% 5%, rgba(123, 47, 255, 0.24), transparent 60%), radial-gradient(ellipse 62% 22% at 86% 22%, rgba(150, 60, 255, 0.16), transparent 62%), radial-gradient(ellipse 78% 26% at 50% 58%, rgba(224, 64, 251, 0.09), transparent 64%), radial-gradient(ellipse 66% 24% at 28% 92%, rgba(90, 70, 255, 0.13), transparent 62%), url("img/stars.svg"); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-size: auto, auto, auto, auto, auto, 480px 860px; background-position: center; background-attachment: fixed; } /* ── Modèle "shell fixe" ──────────────────────────────────────────────────── La page ne défile jamais ; seul #ss-scroll défile en interne, entre l'en-tête (flex-top) et la tab bar (position:fixed). Zéro rebond de page, et pas de scroll quand le contenu tient dans l'écran — comportement identique partout. Les pages bespoke plein écran (iMessage, clavier) s'excluent via [data-ss-noscroll] et gardent leur propre mise en page. */ body[data-ss-shell]:not([data-ss-noscroll]) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } #ss-scroll { flex: 1 1 auto; min-height: 0; /* requis pour le scroll d'un enfant flex */ width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* momentum iOS */ overscroll-behavior-y: contain; /* pas de chaînage vers le body */ padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4)); /* dégage la tab bar */ } /* Chrome non-sélectionnable (le contenu reste sélectionnable) */ body[data-ss-shell] #ss-tabbar, body[data-ss-shell] #ss-header { -webkit-user-select: none; user-select: none; } /* Menu burger legacy retiré : remplacé par l'œil central (menu plein écran). On masque son UI en CSS — la fonction initBurgerMenu garde ses effets de bord (session reset guard, rappel handicap, watchers auth). */ body[data-ss-shell] #ss-burger-btn, body[data-ss-shell] #ss-nav-overlay, body[data-ss-shell] #ss-nav-drawer { display: none !important; } /* Cibles tactiles : minimum 44px partout dans le shell */ body[data-ss-shell] button, body[data-ss-shell] .ss-tap { min-height: 44px; } /* Anti-zoom Safari : tout champ < 16px déclenche un zoom au focus */ body[data-ss-shell] input, body[data-ss-shell] textarea, body[data-ss-shell] select { font-size: max(16px, 1rem); } /* ── Cadre "téléphone" sur grand écran ────────────────────────────────────────── Comportement par défaut : app centrée en colonne "téléphone" sur desktop. Exception : live.html passe en plein écran (override scopé dans live.html). */ @media (min-width: 700px) { html { background: var(--night); overscroll-behavior-y: none; } /* Chrome/Android : le PTR natif se déclenche sur , pas — sinon il se réarme même en bas de page (le body ne défile jamais, cf. modèle "shell fixe") */ body[data-ss-shell] { max-width: var(--app-max); margin: 0 auto; min-height: 100dvh; box-shadow: var(--shadow-float), 0 0 0 1px rgba(0, 229, 255, 0.08); border-radius: 0; /* le scroll interdit de clipper proprement */ position: relative; } /* nébuleuse ambiante autour du "téléphone" */ body[data-ss-shell]::after { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(0,229,255,0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 88% 88%, rgba(224,64,251,0.06) 0%, transparent 62%), var(--night); width: 100vw; left: calc(50% - 50vw); pointer-events: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. En-tête compact (SSShell.header) — grand titre iOS + retour + condensation ═══════════════════════════════════════════════════════════════════════════ */ #ss-header { position: relative; z-index: 900; flex: 0 0 auto; /* flex-top : reste fixe au-dessus de #ss-scroll */ padding-top: var(--safe-t); display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--header-h) + var(--safe-t)); padding-left: var(--sp-4); padding-right: var(--sp-4); background: linear-gradient(to bottom, var(--glass-chrome), var(--glass-chrome-2)); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid transparent; transition: border-color var(--dur-press) linear, background var(--dur-press) linear; } #ss-header.is-scrolled { border-bottom-color: var(--hairline); } #ss-header .ss-back { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--cyan); font-size: 1.5rem; line-height: 1; border-radius: var(--r-pill); transition: transform var(--dur-press) var(--ease-spring), background var(--dur-press); } #ss-header .ss-back:active { transform: scale(0.88); background: rgba(0,229,255,0.1); } /* Titre centré sur la page, convention barre de navigation iOS : les commandes vivent sur les bords, le titre reste au milieu quoi qu'il arrive. Centrage en absolu (et non via flex) parce que les éléments de bord sont asymétriques et de largeur variable : le bouton retour est optionnel, et la poignée du centre de contrôle (#ss-cc-handle) est en position:fixed à gauche, donc hors du flux de l'en-tête — un simple flex la ferait chevaucher le titre. La largeur max réserve ~75px de chaque côté pour ces commandes ; au-delà, le titre s'ellipse au lieu de passer dessous. */ #ss-header .ss-title { position: absolute; left: 50%; transform: translateX(-50%); top: var(--safe-t, 0px); height: var(--header-h); display: flex; align-items: center; justify-content: center; max-width: calc(100% - 150px); text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; font-size: 1.18rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ss-header .ss-header-spacer { flex: 1; } /* ═══════════════════════════════════════════════════════════════════════════ 3. Barre d'onglets (SSShell tab bar) — verre flouté, œil central surélevé ═══════════════════════════════════════════════════════════════════════════ */ #ss-tabbar { position: fixed; z-index: 1000; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--app-max); height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; align-items: stretch; background: linear-gradient(to top, var(--glass-chrome) 55%, var(--glass-chrome-2)); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid var(--hairline); touch-action: none; /* le glissé vertical vers le haut = ouverture menu (sinon le navigateur le vole en scroll → pointercancel) */ } .ss-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--text-mid); font-family: var(--font-ui); transition: color var(--dur-press) linear; -webkit-tap-highlight-color: transparent; } .ss-tab-ico { font-size: 1.46rem; line-height: 1; transition: transform var(--dur-press) var(--ease-spring); } .ss-tab-lbl { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.02em; } .ss-tab:active .ss-tab-ico { transform: scale(0.82); } .ss-tab.is-active { color: var(--cyan); } .ss-tab.is-active .ss-tab-ico { filter: drop-shadow(0 0 8px var(--cyan)); } /* Indicateur d'onglet actif en accent — visible même si l'icône est un emoji (les emojis ignorent la propriété color). Piloté par --cyan = couleur d'app. */ .ss-tab.is-active:not(.ss-tab-center)::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } /* pastille de notification (rose) */ .ss-tab-badge { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; background: var(--fuchsia); color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 1; border-radius: var(--r-pill); box-shadow: 0 0 0 2px var(--glass-strong), var(--glow-fuchsia); transform-origin: center; animation: ssBadgePop 0.4s var(--ease-spring); /* rejoué à chaque display:none→grid */ } .ss-tab-badge[hidden] { display: none; } @keyframes ssBadgePop { 0% { transform: scale(0); } 58% { transform: scale(1.28); } 100% { transform: scale(1); } } /* onglet central surélevé — l'œil Secret Agency */ .ss-tab-center { flex: 0 0 78px; } .ss-tab-center .ss-eye { position: relative; top: -18px; width: 62px; height: 62px; border-radius: var(--r-pill); display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #1a1140, #0a0518); border: 1.5px solid rgba(168, 90, 255, 0.6); box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 22px rgba(224,64,251,0.35), 0 0 44px rgba(138,43,226,0.55); transition: transform var(--dur-press) var(--ease-spring); } /* Halo violet rayonnant derrière l'œil (point focal bas d'écran, cf. concept art) */ .ss-tab-center .ss-eye::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(138,43,226,0.5) 0%, rgba(123,47,255,0.18) 45%, transparent 72%); } .ss-tab-center:active .ss-eye { transform: scale(0.9); } .ss-tab-center.is-active .ss-eye { border-color: var(--fuchsia); box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 28px rgba(224,64,251,0.6), 0 0 52px rgba(138,43,226,0.6); } .ss-tab-center .ss-eye svg { width: 34px; height: 22px; display: block; } .ss-tab-center .ss-tab-lbl { position: relative; top: -13px; } /* ═══════════════════════════════════════════════════════════════════════════ 3b. Menu plein écran (ouvert par l'œil central) — fond ~70% + flou, style iPhone ═══════════════════════════════════════════════════════════════════════════ */ #ss-menu { position: fixed; inset: 0; z-index: 1100; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(6, 9, 30, 0.5); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); padding: calc(var(--safe-t) + var(--sp-8)) var(--sp-5) calc(var(--tabbar-h) + var(--safe-b) + var(--sp-8)); opacity: 0; pointer-events: none; transition: opacity var(--dur-view) var(--ease-out); } #ss-menu.is-open { opacity: 1; pointer-events: auto; } #ss-menu .ss-menu-inner { width: 100%; max-width: var(--app-max); margin: 0 auto; transform: scale(0.94); opacity: 0; transition: transform var(--dur-view) var(--ease-spring), opacity var(--dur-view) var(--ease-out); } #ss-menu.is-open .ss-menu-inner { transform: scale(1); opacity: 1; } #ss-menu .ss-menu-title { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--white); text-align: center; margin-bottom: var(--sp-2); } #ss-menu .ss-menu-hint { text-align: center; font-size: 0.66rem; letter-spacing: 0.02em; color: var(--text-mid); margin-bottom: var(--sp-5); } .ss-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) var(--sp-3); } /* Réorganisation — mode édition façon iOS. -webkit-touch-callout:none = tue le menu contextuel Safari à l'appui long. */ .ss-menu-item { position: relative; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Épingle (coin haut-gauche) — indicateur si épinglée, bouton en mode édition */ .ss-menu-pin { position: absolute; top: 2px; left: 2px; z-index: 4; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50%; font-size: 0.66rem; line-height: 1; color: var(--text-mid); background: rgba(4, 6, 20, 0.6); border: 1px solid var(--hairline); pointer-events: none; } .ss-menu-item.is-pinned .ss-menu-pin { display: grid; color: var(--amber); background: rgba(200, 151, 58, 0.18); border-color: rgba(200, 151, 58, 0.55); } #ss-menu.editing .ss-menu-pin { display: grid; pointer-events: auto; } /* tappable seulement en édition */ #ss-menu.editing .ss-menu-item { touch-action: none; } /* pas de scroll pendant le drag */ #ss-menu.editing .ss-menu-item:not(.is-placeholder) { animation: ssJiggle 0.34s ease-in-out infinite; } @keyframes ssJiggle { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } } /* Original « pris » = fantôme laissé dans la grille (montre où l'icône va retomber) */ .ss-menu-item.is-placeholder { opacity: 0.28; animation: none !important; } /* Clone flottant qui suit le doigt (enfant de , hors #ss-menu → fixed = viewport) */ .ss-menu-proxy { position: fixed; z-index: 2000; margin: 0; pointer-events: none; transform: scale(1.12); filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6)); } /* Bouton « Terminé » — visible seulement en mode édition */ .ss-menu-done { display: none; margin: var(--sp-6) auto 0; padding: 12px 28px; min-height: 46px; border: 0; cursor: pointer; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 700; font-size: 0.86rem; background: linear-gradient(135deg, var(--cyan), var(--azure)); color: #04121f; } #ss-menu.editing .ss-menu-done { display: block; } #ss-menu.editing .ss-menu-close { display: none; } #ss-menu.editing .ss-menu-hint { color: var(--cyan); } .ss-menu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--cream); transition: transform var(--dur-press) var(--ease-spring); } .ss-menu-item:active { transform: scale(0.9); } .ss-menu-ico { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 1.55rem; background: var(--surface-1); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); } .ss-menu-lbl { font-size: 0.68rem; font-weight: 600; text-align: center; line-height: 1.2; color: var(--text-mid-strong); } .ss-menu-close { display: grid; place-items: center; width: 48px; height: 48px; margin: var(--sp-6) auto 0; border-radius: var(--r-pill); cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hairline); color: var(--cream); font-size: 1.2rem; transition: transform var(--dur-press) var(--ease-spring); } .ss-menu-close:active { transform: scale(0.9); } /* ═══════════════════════════════════════════════════════════════════════════ 4. Conteneur de page + titre "large" iOS ═══════════════════════════════════════════════════════════════════════════ */ .ss-page { width: 100%; max-width: var(--app-max); margin: 0 auto; padding: 0 var(--sp-4); } .ss-largetitle { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; font-size: 1.9rem; color: var(--white); padding: var(--sp-4) 0 var(--sp-2); } .ss-largetitle .ss-largetitle-sub { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 0.82rem; letter-spacing: 0; color: var(--text-mid-strong); margin-top: 3px; } /* ═══════════════════════════════════════════════════════════════════════════ 5. Cartes (dashboard) — coins mous, gradient par accent, ombre douce ═══════════════════════════════════════════════════════════════════════════ */ .ss-card { position: relative; display: block; text-decoration: none; border-radius: var(--r-card); padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); color: var(--text); transition: transform var(--dur-press) var(--ease-spring), box-shadow var(--dur-press); overflow: hidden; } .ss-card:active { transform: scale(0.97); } .ss-card-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-tile); font-size: 1.3rem; margin-bottom: var(--sp-3); background: rgba(255,255,255,0.06); } .ss-card-title { display: block; font-weight: 700; font-size: 1rem; color: var(--white); } .ss-card-desc { display: block; font-size: 0.76rem; color: var(--text-mid-strong); margin-top: 2px; line-height: 1.35; } /* teintes d'accent par carte (dégradé subtil + icône colorée) */ .ss-card--cyan { background: linear-gradient(155deg, rgba(0,229,255,0.14), var(--surface-1) 62%); } .ss-card--cyan .ss-card-ico { color: var(--cyan); background: rgba(0,229,255,0.14); } .ss-card--fuchsia { background: linear-gradient(155deg, rgba(224,64,251,0.16), var(--surface-1) 62%); } .ss-card--fuchsia .ss-card-ico { color: var(--fuchsia); background: rgba(224,64,251,0.15); } .ss-card--violet { background: linear-gradient(155deg, rgba(123,47,255,0.16), var(--surface-1) 62%); } .ss-card--violet .ss-card-ico { color: #a877ff; background: rgba(123,47,255,0.16); } .ss-card--amber { background: linear-gradient(155deg, rgba(200,151,58,0.16), var(--surface-1) 62%); } .ss-card--amber .ss-card-ico { color: var(--amber); background: rgba(200,151,58,0.16); } .ss-card--green { background: linear-gradient(155deg, rgba(0,230,118,0.14), var(--surface-1) 62%); } .ss-card--green .ss-card-ico { color: var(--green); background: rgba(0,230,118,0.14); } /* badge compteur en coin de carte */ .ss-card-badge { position: absolute; top: var(--sp-3); right: var(--sp-3); min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; background: var(--fuchsia); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: var(--r-pill); box-shadow: var(--glow-fuchsia); transform-origin: center; animation: ssBadgePop 0.4s var(--ease-spring); } .ss-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } /* rangée de raccourcis à défilement horizontal (accès secondaire) */ .ss-hscroll { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--sp-1) 0 var(--sp-2); -ms-overflow-style: none; scrollbar-width: none; } .ss-hscroll::-webkit-scrollbar { display: none; } .ss-hscroll > * { scroll-snap-align: start; flex: 0 0 auto; } .ss-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; padding: var(--sp-3) var(--sp-1); border-radius: var(--r-tile); text-decoration: none; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-mid-strong); text-align: center; transition: transform var(--dur-press) var(--ease-spring); } .ss-chip:active { transform: scale(0.94); } .ss-chip-ico { font-size: 1.25rem; } .ss-chip-lbl { font-size: 0.62rem; font-weight: 600; line-height: 1.2; } /* ═══════════════════════════════════════════════════════════════════════════ 6. Listes "inset grouped" iOS (secrets, historique, profil) ═══════════════════════════════════════════════════════════════════════════ */ .ss-list { border-radius: var(--r-card); background: var(--surface-1); border: 1px solid var(--hairline); overflow: hidden; } .ss-list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: 52px; text-decoration: none; color: var(--text); border-top: 1px solid var(--hairline); transition: background var(--dur-press); } .ss-list-row:first-child { border-top: 0; } .ss-list-row:active { background: rgba(255,255,255,0.04); } .ss-list-row-ico { flex: 0 0 auto; font-size: 1.1rem; width: 26px; text-align: center; color: var(--cyan); } .ss-list-row-main { flex: 1; min-width: 0; } .ss-list-row-title { font-weight: 600; font-size: 0.92rem; } .ss-list-row-sub { font-size: 0.74rem; color: var(--text-mid-strong); } .ss-list-row-val { font-size: 0.8rem; font-weight: 600; } .ss-list-row-chevron { flex: 0 0 auto; color: var(--text-dim); font-size: 1.1rem; } .ss-val-ok { color: var(--green); } .ss-val-todo { color: var(--text-mid); } /* ═══════════════════════════════════════════════════════════════════════════ 7. Contrôle segmenté (EN COURS / TERMINÉES) ═══════════════════════════════════════════════════════════════════════════ */ .ss-segment { display: flex; padding: 3px; gap: 3px; background: var(--surface-2); border-radius: var(--r-pill); border: 1px solid var(--hairline); } .ss-segment button { flex: 1; border: 0; cursor: pointer; min-height: 38px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--text-mid-strong); background: transparent; transition: background var(--dur-press), color var(--dur-press); } .ss-segment button.is-active { background: linear-gradient(135deg, var(--cyan), var(--azure)); color: #04121f; box-shadow: var(--glow-cyan); } /* ═══════════════════════════════════════════════════════════════════════════ 8. Boutons pilule ═══════════════════════════════════════════════════════════════════════════ */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 46px; border: 0; cursor: pointer; text-decoration: none; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; transition: transform var(--dur-press) var(--ease-spring), filter var(--dur-press); } .ss-btn:active { transform: scale(0.95); } .ss-btn--primary { background: linear-gradient(135deg, var(--fuchsia), #b026d3); color: #fff; box-shadow: var(--glow-fuchsia); } .ss-btn--cyan { background: linear-gradient(135deg, var(--cyan), var(--azure)); color: #04121f; box-shadow: var(--glow-cyan); } .ss-btn--ghost { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--hairline); } .ss-btn[disabled]{ opacity: 0.5; cursor: not-allowed; } .ss-btn--block { display: flex; width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ 9. Barre de progression arrondie (missions, XP) ═══════════════════════════════════════════════════════════════════════════ */ .ss-progress { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); overflow: hidden; } .ss-progress > i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--cyan), var(--fuchsia)); transition: width var(--dur-view) var(--ease-out); } .ss-tabnum { font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ 10. Bottom sheet (poignée de drag) — remplace les modals centrés ═══════════════════════════════════════════════════════════════════════════ */ .ss-sheet-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(2, 4, 16, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur-view) var(--ease-out); } .ss-sheet-scrim.is-open { opacity: 1; } .ss-sheet { position: fixed; z-index: 1201; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: 100%; max-width: var(--app-max); padding: var(--sp-2) var(--sp-5) calc(var(--sp-6) + var(--safe-b)); background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top-left-radius: var(--r-sheet); border-top-right-radius: var(--r-sheet); border-top: 1px solid var(--glass-border-hover); box-shadow: var(--shadow-float); transition: transform var(--dur-view) var(--ease-spring); } .ss-sheet.is-open { transform: translate(-50%, 0); } .ss-sheet-grip { width: 38px; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,0.25); margin: var(--sp-2) auto var(--sp-4); } .ss-sheet-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--white); margin-bottom: var(--sp-2); } /* ═══════════════════════════════════════════════════════════════════════════ 11. Transitions de navigation cross-document (Chrome 126+/Safari 18.2) Le chrome reste fixe, le contenu glisse. Fallback silencieux ailleurs. ═══════════════════════════════════════════════════════════════════════════ */ /* Transition FIABLE partout : fondu + léger glissé du CONTENU à chaque chargement de page (marche sur tout iOS, y compris PWA standalone). Cible le contenu, pas le body, pour ne pas animer la tab bar/header fixes. */ body[data-ss-shell] .ss-page, body[data-ss-shell] #main-content, body[data-ss-shell] #home { animation: ssPageIn 0.30s var(--ease-out) backwards; } @keyframes ssPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Bonus Safari 18.2+ : View Transitions cross-document → le chrome reste stable pendant la nav. ⚠ CRITIQUE : deux éléments avec le MÊME view-transition-name annulent TOUTE la transition (silencieux) → noms distincts obligatoires. */ @view-transition { navigation: auto; } #ss-tabbar { view-transition-name: ss-tabbar; } #ss-header { view-transition-name: ss-header; } body[data-ss-shell] #cagnotte-header { view-transition-name: ss-cagnotte; } /* Glissement directionnel du contenu (push/pop iOS). Les types 'ss-forward' / 'ss-back' sont ajoutés en JS (ss-shell.js, events pageswap/pagereveal) selon le sens de nav. Le chrome nommé (tabbar/header/cagnotte) garde sa transition propre → il reste en place pendant que SEUL le contenu (root) glisse. */ @keyframes ss-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes ss-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-28%); opacity: 0; } } @keyframes ss-slide-in-left { from { transform: translateX(-28%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes ss-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } } :root:active-view-transition-type(ss-forward)::view-transition-old(root) { animation: ss-slide-out-left 0.32s var(--ease-out) both; } :root:active-view-transition-type(ss-forward)::view-transition-new(root) { animation: ss-slide-in-right 0.32s var(--ease-out) both; } :root:active-view-transition-type(ss-back)::view-transition-old(root) { animation: ss-slide-out-right 0.32s var(--ease-out) both; } :root:active-view-transition-type(ss-back)::view-transition-new(root) { animation: ss-slide-in-left 0.32s var(--ease-out) both; } /* Barre de progression de navigation (réseau lent / navigateurs sans View Transition). */ #ss-navprog { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; z-index: 3000; opacity: 0; pointer-events: none; background: linear-gradient(90deg, var(--cyan), var(--fuchsia)); box-shadow: 0 0 8px var(--cyan); } #ss-navprog.is-active { width: 90%; opacity: 1; transition: width 1.4s cubic-bezier(0.1,0.7,0.2,1), opacity 0.2s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } body[data-ss-shell] .ss-page, body[data-ss-shell] #main-content, body[data-ss-shell] #home { animation: none; } @view-transition { navigation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 12. Polish partagé des pages migrées (chrome commun) Sélecteurs préfixés `body[data-ss-shell]` → spécificité (id + attribut) qui BAT les définitions `#id` inline de chaque page, quel que soit l'ordre de chargement. Restyle uniquement le chrome COMMUN, jamais le contenu bespoke. Les pages principales (missions/buzz/…) gardent leurs overrides plus spécifiques (`#main-content .section-title`, etc.) qui l'emportent ici. ═══════════════════════════════════════════════════════════════════════════ */ /* En-tête cagnotte (copié à l'identique sur ~6 pages) → bande verre iOS */ body[data-ss-shell] #cagnotte-header { height: auto; justify-content: flex-start; gap: var(--sp-3); padding: calc(var(--safe-t) + 10px) var(--sp-4) 10px; background: linear-gradient(to bottom, var(--glass-chrome), var(--glass-chrome-2)); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid var(--hairline); box-shadow: none; } body[data-ss-shell] #cagnotte-header::before, body[data-ss-shell] #cagnotte-header::after { display: none; } /* retire les crochets HUD */ body[data-ss-shell] #cagnotte-header #cagnotte-amount { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; } body[data-ss-shell] #cagnotte-header .cagnotte-meta { flex: 1; min-width: 0; } body[data-ss-shell] #cagnotte-header .cagnotte-pseudo, body[data-ss-shell] #cagnotte-header #player-pseudo-name { color: var(--cyan); } /* Wrapper largeur téléphone */ body[data-ss-shell] #main-content { max-width: var(--app-max); } /* Labels de section → iOS */ body[data-ss-shell] .section-title { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mid); } /* Panneaux HUD partagés → arrondis, sans crochets */ body[data-ss-shell] .hud-panel { border-radius: var(--r-card); } body[data-ss-shell] .hud-panel::before, body[data-ss-shell] .hud-panel::after { display: none; } /* États vides */ body[data-ss-shell] .empty-state { font-family: var(--font-ui); } /* ═══════════════════════════════════════════════════════════════════════════ 13. Cadres — thème constellation : fond #231930 @30% + bordure violet→bleu Technique double-background (padding-box = fond, border-box = dégradé) → coins arrondis respectés. !important pour uniformiser malgré les fonds par-carte. ═══════════════════════════════════════════════════════════════════════════ */ body[data-ss-shell] .ss-card, body[data-ss-shell] .ss-list, #home .hx-card, #home .hx-event, #home #claim-box { border: 1px solid transparent !important; background: linear-gradient(var(--frame-fill), var(--frame-fill)) padding-box, var(--frame-grad) border-box !important; } /* ═══════════════════════════════════════════════════════════════════════════ 14. Retour tactile (press states) + non-sélection du chrome `.ss-pressed` est posée/retirée au pointeur par ss-shell.js. iOS ne déclenche pas `:active` de façon fiable hors