/* ═══════════════════════════════════════════════════════════ AIONOS — Layer mobile global Importé par chaque page (dans `` après styles.css). Ne touche pas le desktop : tout est sous @media (max-width: 900px) / (max-width: 720px) / (max-width: 480px). ═══════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────── 1) Tablette portrait + mobile (≤ 900px) ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { html, body { max-width: 100vw; overflow-x: hidden; } /* Pages dashboard-like : on autorise le scroll vertical normal sur mobile. Sinon le `overflow:hidden` du desktop empêche de scroller la page. */ body.dashboard-page, html.dashboard-page { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: 100dvh; } body.dashboard-page .dashboard-main { overflow: visible !important; height: auto !important; min-height: 100dvh; margin-left: 0 !important; } /* ───── Sidebar desktop → drawer mobile ───────────────── */ .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; width: min(82vw, 320px) !important; max-width: 320px; z-index: 1100 !important; transform: translateX(-100%) !important; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .sidebar.is-mobile-open, .sidebar.open { transform: translateX(0) !important; } /* Annule les variantes desktop (rail / hover-expand / collapsed) sur mobile : sur mobile le sidebar n'est qu'ouvert ou fermé, pas de rail. */ .sidebar.sidebar--hover-expand, .sidebar.sidebar--hover-expand:hover, .sidebar.collapsed { width: min(82vw, 320px) !important; } .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .nav-text, .sidebar.collapsed .nav-text { display: inline !important; } .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .sidebar-section-header, .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .sidebar-chats-header, .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .sidebar-chats-list, .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .sidebar-section-content, .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .sidebar-footer-pp-text { display: flex !important; } .sidebar.sidebar--hover-expand:not(:hover):not(.sidebar--pinned) .nav-item, .sidebar.collapsed .nav-item { display: grid !important; grid-template-columns: 1rem minmax(0, 1fr); justify-content: flex-start; padding: 0.375rem 0.5rem; margin: 0; } /* Cache le bouton « épingler / collapse » desktop sur mobile (remplacé par le burger). */ .sidebar-trigger-btn, .sidebar-toggle-btn { display: none !important; } /* Backdrop mobile */ .aionos-mobile-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); z-index: 1090; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .aionos-mobile-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Bouton burger flottant (injecté par JS). z-index > sidebar (1100) pour que l'icône X reste cliquable une fois ouvert. */ .aionos-mobile-burger { position: fixed; top: env(safe-area-inset-top, 14px); left: 14px; z-index: 1200; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(12, 13, 20, 0.92); color: rgba(255, 255, 255, 0.9); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .aionos-mobile-burger svg { width: 18px; height: 18px; } .aionos-mobile-burger:hover { background: rgba(20, 22, 32, 0.98); } /* ───── Page Dashboard ───────────────────────────────── */ .dashboard-section .categories-content { padding: 0 1rem 2rem !important; } .dashboard-prompt { font-size: 1.55rem !important; line-height: 1.2; } .aggregator-category-row { min-height: auto !important; padding: 4.5rem 0.75rem 1rem !important; } .ruixen-ai-chat { width: 100% !important; max-width: 100% !important; } .catalog-shell { padding: 0.85rem 0.85rem 1rem !important; border-radius: 0.85rem !important; } .categories-grid-2col-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.6rem !important; } /* Toolbar catalogue : éviter l'overflow horizontal */ .dash-cat-toolbar { flex-wrap: wrap !important; } .dash-cat-toolbar__filters, .filters-row-dashboard { flex-wrap: wrap !important; gap: 0.4rem !important; } .filter-btn-dashboard { padding: 0.45rem 0.85rem !important; font-size: 0.78rem !important; } .categories-main-title-dashboard { font-size: 1.15rem !important; } .catalog-subtitle { font-size: 0.78rem !important; padding: 0 0.5rem; } /* ───── Page Settings ───────────────────────────────── */ .settings-shell { padding: 4rem 1rem 3rem !important; /* 4rem top pour laisser place au burger */ } /* ───── Page Communauté / Favoris ────────────────────── */ .community-grid, .community-feed, .favorites-grid, .ai-card-grid, .agents-grid, .agents-grid-2col { grid-template-columns: 1fr !important; gap: 0.85rem !important; } main, .community-main, .favorites-main { margin-left: 0 !important; padding: 4.25rem 1rem 2rem !important; } /* ───── Auth (signin / signup / reset) ───────────────── */ .auth-container, .signin-page, .signup-page { padding: 1.25rem 1rem !important; min-height: 100dvh !important; height: auto !important; } .auth-card, .signin-card, .signup-card { width: 100% !important; max-width: 420px !important; padding: 1.5rem 1.25rem !important; margin: 0 auto !important; } .auth-side, .signin-bg, .signin-side { display: none !important; } /* ───── New discussion (chat) ────────────────────────── */ .nd-chat-main, .nd-chat-page, .new-discussion-main { margin-left: 0 !important; padding: 4.25rem 0.5rem 1rem !important; } .nd-chat-msg__text { font-size: 0.92rem !important; } /* ───── Tarifications ────────────────────────────────── */ .pricing-grid, .pricing-cards { grid-template-columns: 1fr !important; gap: 1rem !important; } /* ───── Landing (index.html) ─────────────────────────── */ body.landing-page { font-size: 16px; } /* Désactiver scroll-snap sur mobile : trop rigide au touch */ html:has(body.landing-page) { scroll-snap-type: none !important; } body.landing-page .hero, body.landing-page section { padding-left: 1rem !important; padding-right: 1rem !important; } body.landing-page h1 { font-size: clamp(1.85rem, 7vw, 2.6rem) !important; } body.landing-page h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; } body.landing-page p { font-size: 0.95rem !important; } body.landing-page .showcase-card__title { font-size: 1.375rem !important; } /* Hero : chat-stack moins espacé sur mobile */ body.landing-page .hero .hero-chat-stack { margin-top: clamp(1.25rem, 3.5vw, 2rem); max-width: 100%; } /* Hero : image de fond repositionnée pour montrer la sphère violette plus haut */ body.landing-page .hero { background-position: center 70% !important; } /* Hero : eyebrow + subtitle compactés */ body.landing-page .hero-eyebrow { margin-bottom: 0.25rem; } body.landing-page .hero .hero-subtitle { font-size: clamp(0.72rem, 3vw, 0.88rem) !important; max-width: 100%; } /* Chips suggestion hero : taille réduite pour tenir sur une ligne */ body.landing-page .suggestion-chip { font-size: 0.78rem !important; padding: 0.4rem 0.7rem !important; } /* Parcours (journey-stack) : on désactive le stacking sticky sur mobile. Chaque pin devient un bloc normal (position: relative) sans scroll-pinning. Le padding-top n'inclut plus --journey-intro-h (qui reste en flow normal). */ .journey-stack-pin { position: relative !important; min-height: auto !important; padding-top: 1.5rem !important; padding-bottom: 2rem !important; } /* Intro non-sticky : flux normal, pas de box-shadow de séparation */ .journey-stack-intro { position: relative !important; top: auto !important; padding-bottom: 0.5rem !important; box-shadow: none !important; background: transparent !important; } /* Annule le margin-top négatif (conçu pour compenser la hauteur du sticky intro) */ .journey-stack-list { margin-top: 0 !important; } /* Cartes : pleine largeur, pas d'offset d'empilement */ .journey-stack-card { width: min(96vw, 1160px) !important; min-height: auto !important; top: 0 !important; } /* Branding AIONOS bas de page : ajuster la hauteur visible sur mobile */ body.landing-page .aionos-brand-hover-section { max-height: clamp(50px, 22vw, 120px) !important; } /* FAQ : grille 1 colonne forcée sous 900px */ .faq-grid { grid-template-columns: 1fr !important; } /* Section produit (browse) : limiter le radar sur mobile */ body.landing-page .browse-sphere-zone { transform: scale(0.9); transform-origin: center top; overflow: hidden; } /* Pricing : grille 1 colonne */ body.landing-page .pricing-section .pricing-grid { grid-template-columns: 1fr !important; } /* Confidentialité : 4 colonnes → 2 colonnes sur tablette, 1 sur mobile étroit */ body.landing-page .confidentiality-section .confidentiality-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; } body.landing-page .confidentiality-section .confidentiality-card-wrap { max-width: 100% !important; } body.landing-page .confidentiality-section .confidentiality-card-body { text-align: left !important; } /* Boutons tactiles : surface min 40px */ button, .btn, [role="button"] { min-height: 40px; } /* Inputs : font-size ≥ 16px sinon Safari iOS zoom auto à la mise au point */ input[type='text'], input[type='email'], input[type='password'], input[type='tel'], input[type='search'], input[type='url'], input[type='number'], textarea, select { font-size: 16px !important; } } /* ────────────────────────────────────────────────────────── 2) Mobile compact (≤ 720px) ──────────────────────────────────────────────────────── */ @media (max-width: 720px) { .categories-grid-2col-dashboard { grid-template-columns: 1fr !important; } .settings-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .settings-grid-2 { grid-template-columns: 1fr !important; } .settings-tabs { width: 100%; } .settings-tab { flex: 1; justify-content: center; } /* Tables (modèles usage) → scroll horizontal propre */ .models-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .models-table { min-width: 540px; } } /* ────────────────────────────────────────────────────────── 3) Mobile très étroit (≤ 480px) ──────────────────────────────────────────────────────── */ @media (max-width: 480px) { .settings-shell { padding: 3.75rem 0.85rem 2rem !important; } .settings-card { padding: 1rem 1rem !important; } .settings-title { font-size: 1.35rem !important; } .stat-card { padding: 0.85rem 1rem !important; } .stat-card-value { font-size: 1.3rem !important; } .dashboard-prompt { font-size: 1.35rem !important; } .account-avatar { width: 64px !important; height: 64px !important; font-size: 1.35rem !important; } /* ───── Landing étroit (≤ 480px) ─────────────────────── */ body.landing-page .hero h1 { font-size: clamp(1.6rem, 8vw, 2.1rem) !important; } /* FAQ : padding réduit */ .faq-item { padding: 0.9rem !important; border-radius: 0.75rem !important; } .faq-question-text { font-size: 0.9rem !important; } /* Parcours : intro plus compacte */ .journey-stack-intro h2 { font-size: clamp(1.2rem, 6vw, 1.5rem) !important; } .journey-stack-intro p { font-size: 0.82rem !important; } /* Cartes parcours pleine largeur */ .journey-stack-card { width: 98vw !important; } /* Confidentialité sur très petit écran : 1 colonne */ body.landing-page .confidentiality-section .confidentiality-cards { grid-template-columns: 1fr !important; } /* Branding AIONOS : lisible même sur 375px */ body.landing-page .aionos-brand-hover-section { max-height: clamp(45px, 26vw, 100px) !important; } /* Chat input hero : texte lisible */ body.landing-page .ruixen-ai-chat { border-radius: 0.75rem; } } /* ────────────────────────────────────────────────────────── 4) Hauteur réduite (paysage mobile) ──────────────────────────────────────────────────────── */ @media (max-height: 520px) and (max-width: 900px) { .aggregator-category-row { min-height: auto !important; padding-top: 3.5rem !important; } } /* ────────────────────────────────────────────────────────── 5) Préférence système : réduire les animations ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sidebar { transition: none !important; } .aionos-mobile-backdrop { transition: none !important; } } /* ────────────────────────────────────────────────────────── 6) Toggle global (classes utilitaires JS) ──────────────────────────────────────────────────────── */ html.aionos-mobile-locked, body.aionos-mobile-locked { overflow: hidden !important; }