/* * NAV 24.9.24 — FEUILLE DE STYLE PUBLIQUE UNIQUE * ============================================================ * Chaque bloc ci-dessous correspond exactement à une feuille active * en 24.9.23. Les classes placées sur reproduisent, page par page, * les anciens chargements et leur ordre de cascade sans fuite de styles. * * Les CSS fournisseurs (Leaflet) et les polices restent séparés. */ /* ============================================================ 01 · AUTHENTIFICATION Source 24.9.23 : assets/auth.css ============================================================ */ html.nav-css-auth * { box-sizing: border-box; } html.nav-css-auth, html.nav-css-auth body { margin: 0; min-height: 100%; font-family: "DM Sans",system-ui,sans-serif; background: #f4d7a1; color: #173f3d; } html.nav-css-auth body.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,1fr); } html.nav-css-auth .auth-visual { position: relative; overflow: hidden; min-height: 100vh; background: #173f3d; } html.nav-css-auth .auth-visual img { width: 100%; height: 100%; object-fit: cover; } html.nav-css-auth .auth-wrap { display: grid; place-items: center; padding: 32px; } html.nav-css-auth .auth-card { width: min(440px,100%); } html.nav-css-auth .auth-card h1 { font-size: clamp(42px,6vw,58px); margin: 0; color: #1f5652; } html.nav-css-auth .auth-card h2 { margin: 8px 0; } html.nav-css-auth .auth-card p { color: #5f7771; } html.nav-css-auth .auth-card label { display: block; margin-top: 12px; font-weight: 600; } html.nav-css-auth .auth-card input { width: 100%; padding: 13px; margin-top: 6px; border: 1px solid #bfae8e; border-radius: 12px; background: #fffaf0; font: inherit; } html.nav-css-auth .auth-card button, html.nav-css-auth .auth-button { display: block; width: 100%; padding: 13px; margin-top: 14px; border: 0; border-radius: 12px; background: #1f5652; color: white; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; } html.nav-css-auth .auth-button.secondary { background: transparent; color: #1f5652; border: 1px solid #1f5652; } html.nav-css-auth .auth-links { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; } html.nav-css-auth .auth-links a { color: #1f5652; } html.nav-css-auth .notice { padding: 12px; border-radius: 12px; margin: 12px 0; } html.nav-css-auth .notice.error { background: #f2c6bf; color: #8d302b; } html.nav-css-auth .notice.success { background: #cce5d7; color: #174e36; } html.nav-css-auth .access-key { padding: 18px; background: #fffaf0; border: 2px dashed #1f5652; border-radius: 14px; font: 700 20px ui-monospace,monospace; overflow-wrap: anywhere; } html.nav-css-auth .muted { font-size: .9rem; } html.nav-css-auth .honeypot { position: absolute; left: -9999px; } @media (max-width:760px) { html.nav-css-auth body.auth-page { grid-template-columns: 1fr; } html.nav-css-auth .auth-visual { min-height: 30vh; max-height: 36vh; } html.nav-css-auth .auth-wrap { padding: 24px 20px; } } /* ============================================================ 02 · PORTAIL / PROFIL / BATEAUX / TRAJETS Source 24.9.23 : portal.css ============================================================ */ html.nav-css-portal { --bg: #07111d; --panel: #0d1d2d; --panel2: #10263a; --text: #f7fbff; --muted: #96aabe; --line: #29415d; --accent: #35a8ff; --gold: #f6c85f; --green: #34d399; --danger: #ff7373; } html.nav-css-portal * { box-sizing: border-box; } html.nav-css-portal { scroll-behavior: smooth; } html.nav-css-portal body { margin: 0; font-family: Inter,system-ui,-apple-system,sans-serif; background: radial-gradient(circle at 80% 0,#12395a 0,transparent 34%),var(--bg); color: var(--text); } html.nav-css-portal a { color: inherit; text-decoration: none; } html.nav-css-portal .portal-header { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 14px max(18px,calc((100vw - 1180px)/2)); background: rgba(7,17,29,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); } html.nav-css-portal .brand { font-weight: 850; font-size: 20px; } html.nav-css-portal .portal-header nav { display: flex; gap: 8px; align-items: center; } html.nav-css-portal .portal-header nav a { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; } html.nav-css-portal .portal-header nav a:hover, html.nav-css-portal .portal-header nav .active { background: rgba(255,255,255,.08); color: #fff; } html.nav-css-portal .portal-main { width: min(1180px,calc(100% - 28px)); margin: 0 auto; padding: 30px 0 70px; } html.nav-css-portal .hero-profile { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; } html.nav-css-portal .avatar { width: 92px; height: 92px; border-radius: 28px; overflow: hidden; background: linear-gradient(145deg,#89cbf4,#b2dbfc); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); } html.nav-css-portal .avatar img { width: 100%; height: 100%; object-fit: cover; } html.nav-css-portal .avatar span { font-size: 42px; font-weight: 800; } html.nav-css-portal .hero-profile h1, html.nav-css-portal .boat-hero h1 { margin: 4px 0 6px; font-size: clamp(30px,5vw,56px); line-height: 1; } html.nav-css-portal .hero-profile p { margin: 0; color: var(--muted); } html.nav-css-portal .eyebrow { font-size: 11px !important; letter-spacing: .16em; color: #7bc7ff !important; margin: 0 !important; font-weight: 800; } html.nav-css-portal .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } html.nav-css-portal .panel, html.nav-css-portal .progress-panel { background: linear-gradient(180deg,rgba(17,39,59,.96),rgba(10,26,41,.96)); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 22px; } html.nav-css-portal .section-block { margin-top: 22px; } html.nav-css-portal .section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } html.nav-css-portal .section-head h2, html.nav-css-portal .progress-copy h2 { margin: 4px 0; font-size: 23px; } html.nav-css-portal .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } html.nav-css-portal .form-grid.three { grid-template-columns: repeat(3,1fr); } html.nav-css-portal label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 13px; } html.nav-css-portal input, html.nav-css-portal select, html.nav-css-portal textarea { width: 100%; border: 1px solid #36516d; border-radius: 11px; padding: 11px 12px; background: #071522; color: #fff; font: inherit; } html.nav-css-portal textarea { min-height: 92px; resize: vertical; } html.nav-css-portal .span-2 { grid-column: span 2; } html.nav-css-portal .span-3 { grid-column: span 3; } html.nav-css-portal button { border: 0; border-radius: 11px; padding: 11px 15px; font-weight: 750; cursor: pointer; } html.nav-css-portal .primary { background: var(--accent); color: #06121c; } html.nav-css-portal .secondary { background: #1d405c; color: #fff; } html.nav-css-portal .ghost { background: transparent; color: #fff; border: 1px solid #385570; } html.nav-css-portal button:disabled { opacity: .5; cursor: not-allowed; } html.nav-css-portal .notice { padding: 13px 16px; border-radius: 12px; margin-bottom: 15px; } html.nav-css-portal .notice.error { background: rgba(255,115,115,.15); color: #ffb1b1; } html.nav-css-portal .notice.success { background: rgba(52,211,153,.15); } html.nav-css-portal .muted { color: var(--muted); font-size: 13px; } html.nav-css-portal .boat-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } html.nav-css-portal .boat-card { overflow: hidden; border-radius: 20px; background: var(--panel); border: 1px solid rgba(255,255,255,.1); transition: .2s; } html.nav-css-portal .boat-card:hover { transform: translateY(-3px); border-color: #4f86b1; } html.nav-css-portal .boat-cover { height: 190px; background: #10263a; } html.nav-css-portal .boat-cover img, html.nav-css-portal .boat-hero-image img { width: 100%; height: 100%; object-fit: cover; } html.nav-css-portal .boat-placeholder { height: 100%; display: grid; place-items: center; font-size: 54px; background: linear-gradient(145deg,#89cbf4,#b2dbfc); } html.nav-css-portal .boat-card-body { padding: 18px; } html.nav-css-portal .boat-card-body h3 { font-size: 24px; margin: 9px 0 4px; } html.nav-css-portal .boat-card-body p { color: var(--muted); margin: 0 0 18px; } html.nav-css-portal .badge, html.nav-css-portal .privacy { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 999px; background: rgba(53,168,255,.15); color: #8dd2ff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } html.nav-css-portal .empty { grid-column: 1/-1; padding: 30px; border: 1px dashed #385570; border-radius: 16px; color: var(--muted); } html.nav-css-portal .boat-hero { position: relative; height: min(54vw,520px); min-height: 310px; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); } html.nav-css-portal .boat-hero-image { position: absolute; inset: 0; } html.nav-css-portal .boat-hero-image:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,rgba(4,12,20,.94) 100%); } html.nav-css-portal .boat-placeholder.large { font-size: 96px; } html.nav-css-portal .boat-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; display: flex; align-items: end; justify-content: space-between; } html.nav-css-portal .boat-hero-overlay p { color: #c0d0de; } html.nav-css-portal .level-chip { min-width: 140px; text-align: right; } html.nav-css-portal .level-chip small { display: block; color: var(--gold); font-weight: 750; } html.nav-css-portal .level-chip strong { font-size: 38px; } html.nav-css-portal .progress-panel { display: grid; grid-template-columns: 1fr 130px; gap: 22px; margin-top: 20px; } html.nav-css-portal .progress-copy p:last-child { color: var(--muted); max-width: 650px; } html.nav-css-portal .progress-ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--progress)*1%),#fffaf0 0); position: relative; } html.nav-css-portal .progress-ring:before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fffaf0; } html.nav-css-portal .progress-ring span { position: relative; font-size: 25px; font-weight: 850; } html.nav-css-portal .progress-groups { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } html.nav-css-portal .progress-groups>div { display: grid; grid-template-columns: 100px 1fr 38px; align-items: center; gap: 9px; font-size: 12px; } html.nav-css-portal .progress-groups span { color: var(--muted); } html.nav-css-portal .mini-track { height: 7px; border-radius: 999px; background: var(--muted); overflow: hidden; } html.nav-css-portal .mini-track i { display: block; height: 100%; background: var(--gold); } html.nav-css-portal .section-tabs { position: sticky; top: 69px; z-index: 800; margin-top: 20px; padding: 8px; display: flex; gap: 5px; overflow: auto; background: rgba(10,25,39,.9); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; } html.nav-css-portal .section-tabs a { white-space: nowrap; padding: 8px 12px; border-radius: 9px; color: var(--muted); } html.nav-css-portal .section-tabs a:hover { background: #17344d; color: #fff; } html.nav-css-portal .equipment-heading { margin: 23px 0 10px; } html.nav-css-portal .equipment-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 12px; } html.nav-css-portal .equipment-item { display: grid; grid-template-columns: auto 32px 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--muted); color: var(--muted); cursor: pointer; } html.nav-css-portal .equipment-item:has(input:checked) { background: rgba(53,168,255,.14); border-color: #3e9bd4; } html.nav-css-portal .equipment-item input { width: auto; } html.nav-css-portal .equipment-icon { font-size: 20px; } html.nav-css-portal .photo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; } html.nav-css-portal .photo-grid figure { margin: 0; border-radius: 14px; overflow: hidden; background: #071522; border: 1px solid #29415d; } html.nav-css-portal .photo-grid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } html.nav-css-portal .photo-grid figcaption { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; color: var(--muted); font-size: 12px; } html.nav-css-portal .photo-grid figcaption form { margin: 0; } html.nav-css-portal .photo-grid figcaption button { padding: 2px 7px; background: rgba(255,115,115,.16); color: #ffb1b1; } html.nav-css-portal .mooring-map { height: 420px; border-radius: 17px; overflow: hidden; border: 1px solid #36516d; margin: 16px 0 10px; } html.nav-css-portal .map-actions { display: flex; gap: 10px; margin-bottom: 16px; } html.nav-css-portal .check { flex-direction: row; align-items: center; } html.nav-css-portal .check input { width: auto; } html.nav-css-portal .privacy { text-transform: none; } @media (max-width:800px) { html.nav-css-portal .portal-header { padding: 11px 14px; } html.nav-css-portal .portal-header nav a { font-size: 0; padding: 9px; } html.nav-css-portal .portal-header nav a:before { font-size: 18px; } html.nav-css-portal .portal-header nav a[href="navigation.php"]:before { content: "🧭"; } html.nav-css-portal .portal-header nav a[href="profile.php"]:before { content: "🚤"; } html.nav-css-portal .portal-header nav a[href="admin.php"]:before { content: "⚙"; } html.nav-css-portal .portal-header nav a[href="logout.php"]:before { content: "⇥"; } html.nav-css-portal .portal-main { padding-top: 18px; } html.nav-css-portal .portal-grid, html.nav-css-portal .form-grid, html.nav-css-portal .form-grid.three, html.nav-css-portal .progress-panel { grid-template-columns: 1fr; } html.nav-css-portal .span-2, html.nav-css-portal .span-3 { grid-column: span 1; } html.nav-css-portal .boat-cards { grid-template-columns: 1fr; } html.nav-css-portal .boat-hero { height: 410px; } html.nav-css-portal .boat-hero-overlay { padding: 20px; } html.nav-css-portal .boat-hero-overlay h1 { font-size: 38px; } html.nav-css-portal .progress-ring { justify-self: center; } html.nav-css-portal .progress-groups { grid-column: 1; grid-template-columns: 1fr; } html.nav-css-portal .equipment-grid { grid-template-columns: 1fr 1fr; } html.nav-css-portal .photo-grid { grid-template-columns: 1fr 1fr; } html.nav-css-portal .mooring-map { height: 360px; } } html.nav-css-portal .points-chip { display: inline-flex; margin-top: 12px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-weight: 700; } html.nav-css-portal .improvement-list { display: grid; gap: 10px; } html.nav-css-portal .improvement-list a { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border,#d8d2c6); border-radius: 16px; text-decoration: none; color: inherit; background: rgba(255,255,255,.45); } html.nav-css-portal .improvement-list p { margin: 3px 0 0; } html.nav-css-portal .improvement-list .material-symbols-rounded { color: var(--accent,#de7d55); } html.nav-css-portal .badge-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; } html.nav-css-portal .game-badge { display: flex; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid rgba(0,0,0,.1); } html.nav-css-portal .game-badge>.material-symbols-rounded { font-size: 34px; } html.nav-css-portal .game-badge h3, html.nav-css-portal .game-badge p { margin: 0 0 5px; } html.nav-css-portal .game-badge.locked { opacity: .52; filter: grayscale(.5); } html.nav-css-portal .game-badge.earned { background: rgba(222,125,85,.12); border-color: rgba(222,125,85,.4); } html.nav-css-portal .badge-progress { height: 7px; background: rgba(0,0,0,.1); border-radius: 99px; overflow: hidden; margin: 8px 0; } html.nav-css-portal .badge-progress i { display: block; height: 100%; background: var(--accent,#de7d55); } html.nav-css-portal .icon-nav { display: flex !important; gap: 8px; align-items: center; } html.nav-css-portal .icon-nav a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; padding: 0 !important; } html.nav-css-portal .icon-nav a.active, html.nav-css-portal .icon-nav a:hover { background: rgba(255,255,255,.1); } html.nav-css-portal .icon-nav .material-symbols-rounded { font-size: 23px; } html.nav-css-portal { --theme-bg: #f7ead0; --theme-panel: #fffaf0; --theme-dark: #173f3d; --theme-accent: #de7d55; --theme-text: #173f3d; --theme-control: #f4d7a1; --nav-icon-fg: #173f3d; --nav-icon-bg: #f4d7a1; } html.nav-css-portal .portal-body { background: var(--theme-bg) !important; color: var(--theme-text) !important; } html.nav-css-portal .portal-header { background: var(--theme-panel) !important; border-bottom: 1px solid #dfcfb2 !important; color: var(--theme-text) !important; } html.nav-css-portal .portal-header .brand { color: var(--theme-dark) !important; } html.nav-css-portal .panel, html.nav-css-portal .progress-panel, html.nav-css-portal .boat-card { background: var(--theme-panel) !important; color: var(--theme-text) !important; border-color: #dfcfb2 !important; } html.nav-css-portal .eyebrow { color: var(--theme-accent) !important; } html.nav-css-portal .muted, html.nav-css-portal .hero-profile p, html.nav-css-portal .boat-card-body p { color: #6d7f78 !important; } html.nav-css-portal input, html.nav-css-portal select, html.nav-css-portal textarea { background: #fffdf7 !important; color: var(--theme-text) !important; border-color: #cbbd9f !important; } html.nav-css-portal .primary { background: var(--theme-accent) !important; color: #fff !important; } html.nav-css-portal .secondary { background: var(--theme-dark) !important; } html.nav-css-portal .section-tabs { background: rgba(255,250,240,.94) !important; border-color: #dfcfb2 !important; } html.nav-css-portal .section-tabs a { color: #5f7771 !important; } html.nav-css-portal .section-tabs a:hover { background: var(--theme-control) !important; color: var(--theme-dark) !important; } html.nav-css-portal .icon-nav { display: flex; gap: 8px; align-items: center; } html.nav-css-portal .icon-nav a { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: transparent; color: #6b7c78; transition: .18s; } html.nav-css-portal .icon-nav a.active { background: var(--nav-icon-bg); color: var(--nav-icon-fg); } html.nav-css-portal .icon-nav a:hover { background: rgba(244,215,161,.55); color: var(--theme-dark); } html.nav-css-portal .icon-nav a.disabled { opacity: .35; cursor: not-allowed; } html.nav-css-portal .badge-grid { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)) !important; gap: 14px !important; } html.nav-css-portal .game-badge { min-height: 215px; display: flex !important; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start; gap: 10px; padding: 20px !important; border-radius: 20px !important; background: #fffdf7 !important; border: 1px solid #dfcfb2 !important; } html.nav-css-portal .game-badge>.material-symbols-rounded { font-size: 58px !important; color: var(--theme-accent); margin-top: 4px; } html.nav-css-portal .game-badge h3 { font-size: 18px; margin: 2px 0 4px !important; } html.nav-css-portal .game-badge p { font-size: 13px; color: #6d7f78; margin: 0 !important; } html.nav-css-portal .game-badge>div { width: 100%; } html.nav-css-portal .game-badge.earned { background: linear-gradient(180deg,#fff9ed,#f5ddae) !important; border-color: #d7a34f !important; box-shadow: 0 8px 18px #b57d2a18; } html.nav-css-portal .game-badge.locked { opacity: .62; filter: none !important; } html.nav-css-portal .badge-progress { height: 6px !important; background: #eadfc9 !important; } html.nav-css-portal .badge-progress i { background: var(--theme-accent) !important; } html.nav-css-portal .trip-card { background: var(--theme-panel) !important; border-color: #dfcfb2 !important; } html.nav-css-portal .trip-stats span { background: var(--theme-control) !important; } html.nav-css-portal .replay-link { background: var(--theme-dark) !important; } /* v12 canonical portal theme */ html.nav-css-portal body.portal-body { background: var(--theme-bg,#f7ead0) !important; color: var(--theme-text,#173f3d) !important; background-image: none !important; } html.nav-css-portal .portal-header { background: var(--theme-panel,#fffaf0) !important; color: var(--theme-text,#173f3d) !important; } html.nav-css-portal .portal-main { color: var(--theme-text,#173f3d) !important; } html.nav-css-portal .panel, html.nav-css-portal .progress-panel, html.nav-css-portal .boat-card, html.nav-css-portal .trip-card { background: var(--theme-panel,#fffaf0) !important; color: var(--theme-text,#173f3d) !important; border-color: #dfcfb2 !important; } html.nav-css-portal .badge-grid { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)) !important; gap: 14px !important; } html.nav-css-portal .game-badge { min-height: 215px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 20px !important; border-radius: 20px !important; background: #fffdf7 !important; border: 1px solid #dfcfb2 !important; color: var(--theme-text,#173f3d) !important; } html.nav-css-portal .game-badge>.material-symbols-rounded { font-size: 58px !important; color: var(--theme-accent,#de7d55) !important; } html.nav-css-portal .game-badge.earned { background: linear-gradient(180deg,#fff9ed,#f5ddae) !important; border-color: #d7a34f !important; } html.nav-css-portal .game-badge.locked { opacity: .62 !important; filter: none !important; } html.nav-css-portal .trip-card h2, html.nav-css-portal .trip-card p, html.nav-css-portal .trip-card .trip-meta { color: var(--theme-text,#173f3d) !important; } html.nav-css-portal .trip-stats span { background: var(--theme-control,#f4d7a1) !important; color: var(--theme-text,#173f3d) !important; } html.nav-css-portal .icon-nav a { display: grid !important; place-items: center !important; } html.nav-css-portal .icon-nav a.active { background: var(--nav-icon-bg,#f4d7a1) !important; color: var(--nav-icon-fg,#173f3d) !important; } /* v13 consolidated warm UI and navigation */ html.nav-css-portal { --theme-bg: #f7ead0; --theme-panel: #fffaf0; --theme-dark: #173f3d; --theme-accent: #de7d55; --theme-text: #173f3d; --theme-control: #f4d7a1; --nav-icon-fg: #173f3d; --nav-icon-bg: #f4d7a1; } html.nav-css-portal .portal-body, html.nav-css-portal body.portal-body { background: var(--theme-bg) !important; color: var(--theme-text) !important; } html.nav-css-portal .portal-header { background: var(--theme-panel) !important; color: var(--theme-text) !important; border-bottom: 1px solid #dfcfb2 !important; box-shadow: 0 4px 18px rgba(70,55,30,.06) !important; } html.nav-css-portal .portal-header .brand { color: var(--theme-dark) !important; } html.nav-css-portal .icon-nav { display: flex !important; align-items: center !important; gap: 8px !important; } html.nav-css-portal .icon-nav a { width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important; border-radius: 14px !important; color: #9bb0c2 !important; background: transparent !important; transition: .18s ease !important; } html.nav-css-portal .icon-nav a .material-symbols-rounded { font-size: 25px !important; line-height: 1 !important; margin: 0 !important; } html.nav-css-portal .icon-nav a.active { background: var(--nav-icon-bg) !important; color: var(--nav-icon-fg) !important; box-shadow: inset 0 0 0 1px rgba(23,63,61,.08) !important; } html.nav-css-portal .icon-nav a:hover:not(.disabled) { background: rgba(244,215,161,.55) !important; color: var(--theme-dark) !important; } html.nav-css-portal .portal-main { color: var(--theme-text) !important; } html.nav-css-portal .panel, html.nav-css-portal .progress-panel, html.nav-css-portal .boat-card, html.nav-css-portal .trip-card, html.nav-css-portal .game-badge { background: var(--theme-panel) !important; color: var(--theme-text) !important; border-color: #dfcfb2 !important; } html.nav-css-portal .panel input, html.nav-css-portal .panel select, html.nav-css-portal .panel textarea, html.nav-css-portal .portal-main input, html.nav-css-portal .portal-main select, html.nav-css-portal .portal-main textarea { background: #fffdf8 !important; color: var(--theme-text) !important; border-color: #d6c4a3 !important; } html.nav-css-portal .primary, html.nav-css-portal .trip-actions .view { background: var(--theme-dark) !important; color: #fff !important; } html.nav-css-portal .secondary { background: var(--theme-control) !important; color: var(--theme-dark) !important; } html.nav-css-portal .eyebrow { color: var(--theme-accent) !important; } html.nav-css-portal .badge-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)) !important; } html.nav-css-portal .game-badge { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; min-height: 210px !important; padding: 22px 16px !important; } html.nav-css-portal .game-badge>.material-symbols-rounded { font-size: 54px !important; color: var(--theme-accent) !important; margin-bottom: 10px !important; } html.nav-css-portal .game-badge h3 { font-size: 18px !important; } html.nav-css-portal .game-badge.earned { background: linear-gradient(180deg,#fffaf0,#fbe7bd) !important; } html.nav-css-portal .game-badge.locked { opacity: .58 !important; } html.nav-css-portal .trip-card h2 { color: var(--theme-dark) !important; } html.nav-css-portal .trip-meta { color: #667d76 !important; } html.nav-css-portal .trip-stats span { background: var(--theme-control) !important; color: var(--theme-dark) !important; } html.nav-css-portal .trip-player { background: var(--theme-panel) !important; color: var(--theme-text) !important; border: 1px solid #dfcfb2 !important; } html.nav-css-portal .trip-player a { color: var(--theme-dark) !important; text-decoration: none; } html.nav-css-portal .trip-player button { background: var(--theme-dark) !important; color: #fff !important; } html.nav-css-portal .trip-player select { background: #fffdf8 !important; color: var(--theme-dark) !important; border: 1px solid #d6c4a3 !important; } @media (max-width:800px) { html.nav-css-portal .portal-header { padding: 10px 14px !important; } html.nav-css-portal .portal-header .brand { font-size: 18px !important; } html.nav-css-portal .icon-nav { gap: 4px !important; } html.nav-css-portal .icon-nav a { width: 39px !important; height: 39px !important; } html.nav-css-portal .icon-nav a .material-symbols-rounded { font-size: 23px !important; } } /* v21 mobile-first refinements */ html.nav-css-portal .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } html.nav-css-portal .portal-header { min-height: 64px; } html.nav-css-portal .portal-header .brand { flex: 0 0 auto; } html.nav-css-portal .icon-nav { min-width: 0; } html.nav-css-portal .icon-nav a { flex: 0 0 44px; } html.nav-css-portal .profile-layout { align-items: start; } html.nav-css-portal .avatar-form { margin: 0; } html.nav-css-portal .avatar-edit { position: relative; cursor: pointer; } html.nav-css-portal .avatar-edit-icon { position: absolute !important; right: 6px; bottom: 6px; width: 30px; height: 30px; display: grid !important; place-items: center; background: var(--theme-panel); color: var(--theme-dark); border-radius: 50%; font-size: 18px !important; box-shadow: 0 3px 12px rgba(0,0,0,.22); } html.nav-css-portal .profile-inline-form { display: grid; gap: 15px; } html.nav-css-portal .editable-field { position: relative; } html.nav-css-portal .editable-field input, html.nav-css-portal .editable-field textarea { padding-right: 52px !important; } html.nav-css-portal .editable-field textarea { min-height: 145px; } html.nav-css-portal .field-edit, html.nav-css-portal .icon-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border-radius: 11px; display: grid; place-items: center; background: transparent; color: var(--theme-accent); } html.nav-css-portal .field-edit .material-symbols-rounded, html.nav-css-portal .icon-action .material-symbols-rounded { font-size: 23px !important; } html.nav-css-portal .editable-textarea .field-edit { top: 8px; transform: none; } html.nav-css-portal .field-edit.editing { background: var(--theme-control); color: var(--theme-dark); } html.nav-css-portal .add-boat-panel { padding: 0 !important; overflow: hidden; } html.nav-css-portal .add-boat-panel summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; cursor: pointer; } html.nav-css-portal .add-boat-panel summary::-webkit-details-marker { display: none; } html.nav-css-portal .add-boat-panel summary h2 { margin: 4px 0; } html.nav-css-portal .details-chevron { transition: transform .2s; } html.nav-css-portal .add-boat-panel[open] .details-chevron { transform: rotate(180deg); } html.nav-css-portal .add-boat-form { padding: 0 22px 22px; } html.nav-css-portal .nav-trip-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; } html.nav-css-portal .nav-trip-card { border-radius: 20px; padding: 18px; border: 1px solid #d9cab1; } html.nav-css-portal .trip-card-head { display: flex; align-items: center; gap: 8px; } html.nav-css-portal .trip-title-form { position: relative; flex: 1; min-width: 0; } html.nav-css-portal .trip-title-input { font-size: 24px !important; font-weight: 700 !important; line-height: 1.15; border-color: transparent !important; background: transparent !important; padding: 4px 48px 4px 0 !important; text-overflow: ellipsis; } html.nav-css-portal .trip-title-input:not([readonly]) { background: #fffdf8 !important; border-color: #d6c4a3 !important; padding-left: 10px !important; } html.nav-css-portal .trip-card-head>form:last-child { position: relative; width: 40px; height: 40px; } html.nav-css-portal .trip-card-head .icon-action { position: static; transform: none; } html.nav-css-portal .delete-trip { color: #9d3e35; background: #f4c8bd; } html.nav-css-portal .trip-meta { margin-top: 5px; } html.nav-css-portal .trip-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 16px 0; } html.nav-css-portal .trip-stats span { padding: 10px 6px; border-radius: 12px; text-align: center; font-size: 13px; } html.nav-css-portal .trip-stats b { display: block; font-size: 16px; } html.nav-css-portal .trip-view-button { display: block; border-radius: 12px; padding: 12px 14px; text-align: center; text-decoration: none; font-weight: 700; background: var(--theme-dark); color: white; } @media (max-width:800px) { html.nav-css-portal .portal-header { padding: 9px 10px !important; gap: 8px; } html.nav-css-portal .portal-header .brand { font-size: 18px !important; } html.nav-css-portal .icon-nav { gap: 2px !important; } html.nav-css-portal .icon-nav a { flex-basis: 38px !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; } html.nav-css-portal .icon-nav a .material-symbols-rounded { font-size: 22px !important; } html.nav-css-portal .portal-main { width: min(100% - 24px,1180px); padding-top: 22px !important; } html.nav-css-portal .portal-main>h1 { font-size: clamp(34px,10vw,48px); line-height: 1.02; margin-bottom: 12px; } html.nav-css-portal .hero-profile { gap: 14px; } html.nav-css-portal .avatar { width: 82px; height: 82px; border-radius: 24px; } html.nav-css-portal .hero-profile h1 { font-size: 38px; } html.nav-css-portal .hero-profile>div:last-child { min-width: 0; } html.nav-css-portal .hero-profile>div:last-child p:last-child { display: none; } html.nav-css-portal .profile-layout { grid-template-columns: 1fr !important; } html.nav-css-portal .panel { padding: 20px; } html.nav-css-portal .profile-inline-form { gap: 14px; } html.nav-css-portal .add-boat-form { grid-template-columns: 1fr !important; } html.nav-css-portal .add-boat-form button { width: 100%; } html.nav-css-portal .nav-trip-cards { grid-template-columns: 1fr; } html.nav-css-portal .nav-trip-card { padding: 16px; } html.nav-css-portal .trip-title-input { font-size: 22px !important; } html.nav-css-portal .trip-stats { gap: 6px; } html.nav-css-portal .trip-stats span { font-size: 12px; } html.nav-css-portal .trip-stats b { font-size: 15px; } } @media (max-width:390px) { html.nav-css-portal .portal-header .brand { display: none; } html.nav-css-portal .portal-header { justify-content: center; } html.nav-css-portal .icon-nav a { flex-basis: 40px !important; width: 40px !important; } html.nav-css-portal .icon-nav { gap: 3px !important; } html.nav-css-portal .trip-stats { grid-template-columns: 1fr 1fr; } html.nav-css-portal .trip-stats span:last-child { grid-column: 1/-1; } } /* v22 fleet order */ html.nav-css-portal .add-boat-section { margin-top: 22px; } html.nav-css-portal .add-boat-section .add-boat-panel { max-width: none; } /* v23 responsive system, unified navigation and true inline editing */ html.nav-css-portal .portal-header { min-height: 66px !important; padding: 10px max(16px,calc((100vw - 1180px)/2)) !important; background: rgba(255,250,240,.96) !important; border-bottom: 1px solid #dfcfb2 !important; backdrop-filter: blur(16px); } html.nav-css-portal .portal-header .brand { display: block !important; color: var(--theme-dark) !important; font-size: 20px !important; line-height: 1; } html.nav-css-portal .portal-header .icon-nav { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; min-width: 0; } html.nav-css-portal .portal-header .icon-nav a { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 13px !important; color: #8da0ad !important; background: transparent !important; overflow: hidden !important; } html.nav-css-portal .portal-header .icon-nav a.active { background: var(--nav-icon-bg) !important; color: var(--nav-icon-fg) !important; box-shadow: inset 0 0 0 1px rgba(23,63,61,.1) !important; } html.nav-css-portal .portal-header .icon-nav a:hover { background: rgba(244,215,161,.55) !important; color: var(--theme-dark) !important; } html.nav-css-portal .portal-header .icon-nav a .material-symbols-rounded { font-size: 26px !important; line-height: 1 !important; margin: 0 !important; } html.nav-css-portal .editable-field { display: flex !important; align-items: center !important; gap: 6px !important; min-height: 46px; position: relative !important; } html.nav-css-portal .field-value { display: inline !important; width: auto; min-width: 0; color: var(--theme-dark); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; } html.nav-css-portal .field-value-multiline { white-space: normal; } html.nav-css-portal .field-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; } html.nav-css-portal .field-edit, html.nav-css-portal .field-save, html.nav-css-portal .field-cancel, html.nav-css-portal .icon-action { position: static !important; transform: none !important; flex: 0 0 34px; width: 34px; height: 34px; padding: 0 !important; display: grid; place-items: center; border-radius: 9px !important; background: transparent !important; color: var(--theme-accent) !important; } html.nav-css-portal .field-save, html.nav-css-portal .save-trip { color: #28715d !important; background: rgba(39,116,94,.10) !important; } html.nav-css-portal .field-cancel, html.nav-css-portal .cancel-trip { color: #8f4c43 !important; background: rgba(191,75,75,.08) !important; } html.nav-css-portal .editable-field .field-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px !important; margin: 0 !important; } html.nav-css-portal .editable-textarea { align-items: flex-start !important; } html.nav-css-portal .editable-textarea .field-actions { padding-top: 2px; } html.nav-css-portal .editable-textarea textarea.field-input { min-height: 120px !important; } html.nav-css-portal .trip-card-head { display: flex !important; align-items: center !important; gap: 4px !important; min-width: 0; } html.nav-css-portal .trip-title-form { display: inline-flex !important; align-items: center !important; gap: 3px !important; flex: 0 1 auto !important; min-width: 0 !important; position: static !important; } html.nav-css-portal .trip-title-text { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--theme-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html.nav-css-portal .trip-title-input { flex: 1 1 220px; min-width: 130px; max-width: 520px; font-size: 20px !important; font-weight: 700 !important; padding: 8px 10px !important; margin: 0 !important; } html.nav-css-portal .trip-delete-form { display: inline-flex !important; align-items: center !important; flex: 0 0 auto; width: auto !important; height: auto !important; position: static !important; } html.nav-css-portal .delete-trip { background: rgba(191,75,75,.12) !important; color: #9d3e35 !important; } @media (max-width:800px) { html.nav-css-portal .portal-header { padding: 9px 10px !important; gap: 6px !important; } html.nav-css-portal .portal-header .brand { font-size: 18px !important; } html.nav-css-portal .portal-header .icon-nav { gap: 2px !important; } html.nav-css-portal .portal-header .icon-nav a { flex-basis: 38px !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; } html.nav-css-portal .portal-header .icon-nav a .material-symbols-rounded { font-size: 23px !important; } html.nav-css-portal .portal-main { width: min(100% - 24px,1180px) !important; } html.nav-css-portal .trip-title-text { font-size: 22px; } } @media (max-width:390px) { html.nav-css-portal .portal-header { padding-inline: 8px !important; } html.nav-css-portal .portal-header .brand { font-size: 17px !important; } html.nav-css-portal .portal-header .icon-nav a { flex-basis: 36px !important; width: 36px !important; height: 36px !important; } html.nav-css-portal .portal-header .icon-nav a .material-symbols-rounded { font-size: 22px !important; } html.nav-css-portal .trip-title-text { font-size: 20px; } html.nav-css-portal .field-edit, html.nav-css-portal .field-save, html.nav-css-portal .field-cancel, html.nav-css-portal .icon-action { flex-basis: 32px; width: 32px; height: 32px; } } @media (min-width:801px) and (max-width:1199px) { html.nav-css-portal .portal-main { width: min(100% - 40px,1100px) !important; } html.nav-css-portal .boat-cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (min-width:1200px) { html.nav-css-portal .portal-main { width: min(1180px,calc(100% - 64px)) !important; } } @media (min-width:1800px) { html.nav-css-portal .portal-main { width: min(1480px,calc(100% - 96px)) !important; } html.nav-css-portal .boat-cards { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } html.nav-css-portal .nav-trip-cards { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } } html.nav-css-portal [hidden] { display: none !important; } /* v24 cross-device layout hardening */ html.nav-css-portal .portal-body { overflow-x: hidden; } html.nav-css-portal .portal-main { min-width: 0; } html.nav-css-portal .profile-grid, html.nav-css-portal .boat-grid, html.nav-css-portal .grid, html.nav-css-portal .twocol { min-width: 0; } html.nav-css-portal .profile-card, html.nav-css-portal .boat-card, html.nav-css-portal .trip-card { overflow: hidden; } html.nav-css-portal img { max-width: 100%; height: auto; } html.nav-css-portal .editable-row { display: flex; align-items: center; gap: 6px; min-width: 0; } html.nav-css-portal .editable-row>*:first-child { min-width: 0; } html.nav-css-portal .inline-edit-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; } html.nav-css-portal .icon-action { display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 11px; } @media (max-width:980px) { html.nav-css-portal .profile-grid, html.nav-css-portal .boat-grid, html.nav-css-portal .grid { grid-template-columns: 1fr !important; } } @media (max-width:720px) { html.nav-css-portal h1 { font-size: clamp(34px,10vw,52px); } html.nav-css-portal .profile-card, html.nav-css-portal .boat-card, html.nav-css-portal .trip-card, html.nav-css-portal .panel { border-radius: 20px; } html.nav-css-portal .trip-title-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } html.nav-css-portal .trip-title-row h2 { min-width: 0; margin-right: 0; } html.nav-css-portal .trip-title-row .icon-action { width: 36px; height: 36px; } } @media (orientation:landscape) and (max-height:620px) { html.nav-css-portal .portal-main { padding-top: 18px; } html.nav-css-portal .profile-hero { grid-template-columns: auto 1fr !important; align-items: center; } html.nav-css-portal .profile-card, html.nav-css-portal .boat-card { padding: 18px !important; } } @media (min-width:1800px) { html.nav-css-portal .portal-main { max-width: 1680px; } html.nav-css-portal .profile-grid, html.nav-css-portal .boat-grid { gap: 30px; } } /* ============================================================ 03 · SHELL COMMUN Source 24.9.23 : assets/app-shell.css ============================================================ */ html.nav-css-shell { --nav-bg: var(--theme-bg,#f7ead0); --nav-panel: var(--theme-panel,#fffaf0); --nav-ink: var(--theme-text,#173f3d); --nav-accent: var(--theme-accent,#de7d55); --nav-control: var(--theme-control,#f4d7a1); --nav-radius: 22px; --nav-shadow: 0 12px 38px rgba(23,63,61,.12); --shell-max: 1440px; } html.nav-css-shell * { box-sizing: border-box; } html.nav-css-shell { -webkit-text-size-adjust: 100%; } html.nav-css-shell body { margin: 0; background: var(--nav-bg); color: var(--nav-ink); font-family: "DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } html.nav-css-shell .app-header { position: sticky; top: 0; z-index: 1200; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 12px max(24px,calc((100vw - var(--shell-max))/2)); background: color-mix(in srgb,var(--nav-panel) 94%,transparent); border-bottom: 1px solid rgba(23,63,61,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html.nav-css-shell .app-header__brand { display: flex; align-items: center; gap: 10px; color: var(--nav-ink); text-decoration: none; font-weight: 800; font-size: 24px; white-space: nowrap; } html.nav-css-shell .app-header__context { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .62; } html.nav-css-shell .icon-nav { display: flex; align-items: center; gap: 6px; min-width: 0; } html.nav-css-shell .icon-nav a { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; color: #8da0ad; text-decoration: none; background: transparent; transition: .16s ease; } html.nav-css-shell .icon-nav a:hover { background: color-mix(in srgb,var(--nav-control) 64%,transparent); color: var(--nav-ink); } html.nav-css-shell .icon-nav a.active { background: var(--nav-control); color: var(--nav-ink); box-shadow: inset 0 0 0 1px rgba(23,63,61,.09); } html.nav-css-shell .icon-nav a.disabled { opacity: .3; pointer-events: none; } html.nav-css-shell .material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 26px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } html.nav-css-shell .portal-main, html.nav-css-shell body>main:not(.login-wrap) { width: min(var(--shell-max),calc(100% - 48px)); margin: 0 auto; padding: 42px 0 72px; } html.nav-css-shell .panel, html.nav-css-shell .card, html.nav-css-shell .profile-card, html.nav-css-shell .trip-card { border-radius: var(--nav-radius); border: 1px solid rgba(23,63,61,.15); background: var(--nav-panel); box-shadow: 0 8px 24px rgba(23,63,61,.05); } html.nav-css-shell button, html.nav-css-shell input, html.nav-css-shell select, html.nav-css-shell textarea { font: inherit; } html.nav-css-shell button, html.nav-css-shell .button { border-radius: 14px; min-height: 46px; } html.nav-css-shell input, html.nav-css-shell select, html.nav-css-shell textarea { max-width: 100%; } @media (max-width:900px) { html.nav-css-shell .app-header { padding-inline: 18px; } html.nav-css-shell .portal-main, html.nav-css-shell body>main:not(.login-wrap) { width: min(100% - 32px,var(--shell-max)); padding-top: 30px; } } @media (max-width:720px) { html.nav-css-shell .app-header { min-height: 66px; padding: 8px 12px; gap: 8px; } html.nav-css-shell .app-header__brand { font-size: 21px; } html.nav-css-shell .app-header__context { display: none; } html.nav-css-shell .icon-nav { gap: 1px; justify-content: flex-end; flex: 1; } html.nav-css-shell .icon-nav a { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; } html.nav-css-shell .icon-nav .material-symbols-rounded { font-size: 23px; } html.nav-css-shell .portal-main, html.nav-css-shell body>main:not(.login-wrap) { width: min(100% - 24px,var(--shell-max)); padding: 24px 0 54px; } } @media (max-width:390px) { html.nav-css-shell .app-header__brand { font-size: 19px; } html.nav-css-shell .icon-nav a { width: 36px; height: 36px; flex-basis: 36px; } html.nav-css-shell .icon-nav .material-symbols-rounded { font-size: 21px; } } @media (orientation:landscape) and (max-height:620px) { html.nav-css-shell .app-header { position: relative; min-height: 56px; } html.nav-css-shell .portal-main, html.nav-css-shell body>main:not(.login-wrap) { padding-top: 18px; } } @media (min-width:1800px) { html.nav-css-shell { --shell-max: 1680px; } html.nav-css-shell .app-header { padding-inline: max(34px,calc((100vw - var(--shell-max))/2)); } } html.nav-css-shell .access-key { padding: 16px; border: 2px dashed var(--theme-accent,#de7d55); border-radius: 14px; background: var(--theme-panel,#fffaf0); font: 700 1.15rem ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; } html.nav-css-shell .button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } html.nav-css-shell .danger-zone { border-color: #b84a42; } html.nav-css-shell .danger-zone .danger { background: #a63e37; color: #fff; } html.nav-css-shell .portal-main .notice { margin: 12px 0; } html.nav-css-shell .portal-main .notice.success { background: #d9eee3; color: #174e36; } html.nav-css-shell .portal-main .notice.error { background: #f4d7d3; color: #842d28; } /* ============================================================ 04 · COMPOSANTS V24 Source 24.9.23 : assets/v24.css ============================================================ */ /* NAV V24 — couche canonique de stabilisation production */ @font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/files/dm-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/files/dm-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url("fonts/files/dm-sans-latin-700-normal.woff2") format("woff2"); } html.nav-css-v24 { font-family: "DM Sans",system-ui,sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.nav-css-v24 body { max-width: 100%; overflow-x: clip; } html.nav-css-v24 img, html.nav-css-v24 video { max-width: 100%; } html.nav-css-v24 button, html.nav-css-v24 a, html.nav-css-v24 input, html.nav-css-v24 select, html.nav-css-v24 textarea { font: inherit; } html.nav-css-v24 button, html.nav-css-v24 a { touch-action: manipulation; } html.nav-css-v24 .material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: 500; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } html.nav-css-v24 .leaflet-container .leaflet-overlay-pane canvas, html.nav-css-v24 .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } /* Safe areas et shell commun */ html.nav-css-v24 .app-header { box-sizing: border-box; padding-top: max(12px,env(safe-area-inset-top)); padding-right: max(18px,env(safe-area-inset-right)); padding-left: max(18px,env(safe-area-inset-left)); min-height: calc(72px + env(safe-area-inset-top)); width: 100%; max-width: 100%; } html.nav-css-v24 .app-header>* { min-width: 0; } html.nav-css-v24 .icon-nav { min-width: 0; } html.nav-css-v24 .portal-main { box-sizing: border-box; width: min(1180px,calc(100% - 32px)); max-width: 100%; margin-inline: auto; padding-bottom: max(42px,env(safe-area-inset-bottom)); } html.nav-css-v24 .portal-grid>* { min-width: 0; } html.nav-css-v24 .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 44px; border-radius: 12px; } html.nav-css-v24 .primary, html.nav-css-v24 .secondary, html.nav-css-v24 .danger { min-height: 44px; padding:10px; } /* Carte plein écran : aucune hauteur JS ni combinaison height + bottom */ html.nav-css-v24:has(body.navigation-page) { height: 100%; min-height: 100%; overflow: hidden; } html.nav-css-v24 .navigation-page { position: fixed; inset: 0; width: auto !important; height: auto !important; min-height: 0 !important; overflow: hidden; background: #dce7e5; } html.nav-css-v24 .navigation-page #map { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; } html.nav-css-v24 .navigation-page .map-topbar { top: max(10px,env(safe-area-inset-top)); left: max(10px,env(safe-area-inset-left)); right: max(10px,env(safe-area-inset-right)); } html.nav-css-v24 .navigation-page .navigation-hud { bottom: max(12px,env(safe-area-inset-bottom)); left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right)); } html.nav-css-v24 .navigation-page .drawer { padding-bottom: max(20px,env(safe-area-inset-bottom)); } html.nav-css-v24 .map-fatal { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; background: #dce7e5; color: #173f3d; text-align: center; font-weight: 700; z-index: 999; } html.nav-css-v24 .leaflet-control-container .leaflet-top { top: max(66px,env(safe-area-inset-top)); } /* Journal */ html.nav-css-v24 .nav-trip-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 18px; width: 100%; max-width: 100%; } html.nav-css-v24 .nav-trip-card { box-sizing: border-box; display: grid; grid-template-rows: auto minmax(44px,auto) auto 1fr auto; min-width: 0; width: 100%; height: 100%; overflow: hidden; } html.nav-css-v24 .trip-card-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: start; min-width: 0; } html.nav-css-v24 .trip-title-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; min-width: 0; } html.nav-css-v24 .trip-title-text { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.nav-css-v24 .trip-title-input { min-width: 0; width: 100%; max-width: 100%; } html.nav-css-v24 .trip-delete-form { flex: none; } html.nav-css-v24 .trip-meta { min-height: 44px; overflow-wrap: anywhere; } html.nav-css-v24 .trip-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } html.nav-css-v24 .trip-stats span, html.nav-css-v24 .trip-stats b { min-width: 0; } html.nav-css-v24 .trip-stats b { white-space: nowrap; font-size: clamp(.9rem,2.4vw,1.12rem); } html.nav-css-v24 .trip-view-button { align-self: end; width: 100%; box-sizing: border-box; } html.nav-css-v24 .trips-page main, html.nav-css-v24 .trips-page .trip-cards { min-width: 0; } html.nav-css-v24 .trip-card-head { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 8px !important; align-items: start !important; } html.nav-css-v24 .trip-title-form { display: grid !important; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center !important; min-width: 0 !important; width: 100%; flex: 1 1 auto !important; } html.nav-css-v24 .trip-title-input { min-width: 0 !important; width: 100%; max-width: 100%; flex: 1 1 auto !important; } html.nav-css-v24 .trip-delete-form { display: flex !important; flex: none !important; } /* Lecteur de trajet */ html.nav-css-v24 .trip-view-page { margin: 0; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; background: #dce7e5; } html.nav-css-v24 .trip-view-page #map { position: fixed; inset: 0; } html.nav-css-v24 .trip-view-page .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; } html.nav-css-v24 .trip-player { position: fixed; z-index: 1100; left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right)); bottom: max(12px,env(safe-area-inset-bottom)); display: grid; gap: 12px; box-sizing: border-box; padding: 16px; background: var(--theme-panel,#fffaf0); border-radius: 18px; box-shadow: 0 12px 36px #0004; } html.nav-css-v24 .trip-player-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; } html.nav-css-v24 .trip-player-title>div { min-width: 0; } html.nav-css-v24 .trip-player-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.nav-css-v24 .back-trips { padding: 10px; flex: 0 0 auto; white-space: nowrap; text-decoration: none !important; } html.nav-css-v24 .back-trips .material-symbols-rounded { font-size: 22px; } html.nav-css-v24 .timeline { display: grid; gap: 5px; } html.nav-css-v24 .timeline input { width: 100%; margin: 0; accent-color: var(--theme-accent,#de7d55); } html.nav-css-v24 .timeline-labels { display: grid; grid-template-columns: 1fr auto 1fr; font-size: .78rem; color: #5f7771; } html.nav-css-v24 .timeline-labels span:last-child { text-align: right; } html.nav-css-v24 .player-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html.nav-css-v24 .player-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px; } html.nav-css-v24 .player-controls label { display: flex; align-items: center; gap: 7px; } html.nav-css-v24 .player-controls select { min-height: 42px; border-radius: 10px; } html.nav-css-v24 .player-controls #viewHint { margin-left: auto; color: #5f7771; font-size: .86rem; } /* Profil et flotte */ html.nav-css-v24 .profile-layout .identity-panel { grid-column: 1/-1; width: 100%; } html.nav-css-v24 .boat-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 18px; align-items: stretch; } html.nav-css-v24 .boat-card { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; width: 100%; height: 100%; text-align: left; } html.nav-css-v24 .boat-card-body { display: flex; flex: 1; flex-direction: column; min-width: 0; } html.nav-css-v24 .boat-card-body strong { margin-top: auto; } html.nav-css-v24 .add-boat-card { appearance: none; padding: 0; border: 1px dashed #9a8663; background: var(--theme-panel,#fffaf0); color: inherit; cursor: pointer; border-radius: inherit; } html.nav-css-v24 .add-boat-cover { display: grid; place-items: center; background: #e9d5ae; } html.nav-css-v24 .add-boat-cover .material-symbols-rounded { font-size: 54px; } html.nav-css-v24 .dialog-backdrop[hidden] { display: none; } html.nav-css-v24 .dialog-backdrop { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; padding: 20px; background: #0d2726a8; } html.nav-css-v24 .add-boat-dialog { position: relative; width: min(620px,100%); max-height: calc(100dvh - 40px); overflow: auto; } html.nav-css-v24 .dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f4d7a1; } /* Bateau */ html.nav-css-v24 .boat-achievement-stack { display: grid; gap: 24px; margin-block: 24px; } html.nav-css-v24 .boat-achievement-stack .progress-panel, html.nav-css-v24 .boat-achievement-stack .improvement-panel, html.nav-css-v24 .boat-achievement-stack .badges-panel { margin: 0; min-width: 0; } html.nav-css-v24 .equipment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } html.nav-css-v24 .equipment-item { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow: hidden; } html.nav-css-v24 .equipment-item>* { min-width: 0; } html.nav-css-v24 .equipment-item>span:last-child { overflow-wrap: anywhere; } html.nav-css-v24 .form-grid>* { min-width: 0; } /* Compte */ html.nav-css-v24 .account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: stretch; } html.nav-css-v24 .account-card { display: grid; grid-template-rows: auto 1fr; gap: 18px; min-width: 0; height: 100%; box-sizing: border-box; } html.nav-css-v24 .account-card>div:first-child { min-width: 0; } html.nav-css-v24 .account-card-action { align-self: end; width: 100%; box-sizing: border-box; } html.nav-css-v24 .account-card-action.form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; } html.nav-css-v24 .account-card-action button, html.nav-css-v24 .account-card-action.button-link { width: 100%; box-sizing: border-box; } html.nav-css-v24 .account-card-action .span-2 { grid-column: 1/-1; } html.nav-css-v24 .document-list { display: grid; gap: 8px; margin: 10px 0; } html.nav-css-v24 .document-list a, html.nav-css-v24 .document-list span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 11px; background: var(--theme-control,#f4d7a1); color: var(--theme-text,#173f3d); text-decoration: none; } html.nav-css-v24 .twofa-setup { display: grid; justify-items: center; gap: 12px; } html.nav-css-v24 .setup-secret { max-width: 100%; overflow-wrap: anywhere; padding: 8px; background: #f4d7a1; border-radius: 8px; } html.nav-css-v24 .recovery-codes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } html.nav-css-v24 .recovery-codes code { padding: 8px; text-align: center; background: #f4d7a1; border-radius: 8px; } html.nav-css-v24 .access-key { max-width: 100%; overflow-wrap: anywhere; } /* Authentification */ html.nav-css-v24 .auth-page>.visual { position: relative; overflow: hidden; min-height: 100dvh; background: #173f3d; } html.nav-css-v24 .welcome-slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transform: scale(1.03); transition: opacity 1.1s ease,transform 8s linear; } html.nav-css-v24 .welcome-slide.active { opacity: 1; transform: scale(1); } html.nav-css-v24 .welcome-dots { position: absolute; z-index: 3; left: 24px; bottom: 24px; display: flex; gap: 7px; } html.nav-css-v24 .welcome-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff8; } html.nav-css-v24 .welcome-dots i.active { background: #fff; } html.nav-css-v24 .login-wrap { display: grid; place-items: center; padding: 32px; } html.nav-css-v24 .login { width: min(430px,100%); } html.nav-css-v24 .login h1 { font-size: 52px; margin: 0; color: #1f5652; } html.nav-css-v24 .login p { color: #5f7771; } html.nav-css-v24 .login label { display: block; font-weight: 600; } html.nav-css-v24 .login input { width: 100%; padding: 13px; margin: 6px 0 15px; border: 1px solid #bfae8e; border-radius: 12px; background: #fffaf0; } html.nav-css-v24 .login button { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: #1f5652; color: #fff; font-weight: 700; cursor: pointer; } html.nav-css-v24 .login .demo { margin-top: 10px; background: #de7d55; } html.nav-css-v24 .login .err { background: #f2c6bf; padding: 10px; border-radius: 10px; color: #8d302b; } html.nav-css-v24 .login a { color: #1f5652; } html.nav-css-v24 .diagnostic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; } html.nav-css-v24 .diagnostic-grid>div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: #f4d7a1; } html.nav-css-v24 .diagnostic-grid span { color: #5f7771; } html.nav-css-v24 .diagnostic-grid strong { text-align: right; overflow-wrap: anywhere; } /* Information stockage */ html.nav-css-v24 .storage-notice { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 20px; background: #0b2322c7; backdrop-filter: blur(6px); } html.nav-css-v24 .storage-notice section { width: min(600px,100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 26px; border-radius: 20px; background: #fffaf0; color: #173f3d; box-shadow: 0 20px 60px #0006; } html.nav-css-v24 .storage-notice h2 { margin-top: 4px; } html.nav-css-v24 .storage-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; } html.nav-css-v24 .legal-page { box-sizing: border-box; width: min(900px,calc(100% - 32px)); margin: 40px auto; padding-bottom: 40px; } html.nav-css-v24 .legal-page .panel { display: grid; gap: 8px; } html.nav-css-v24 .legal-page h2 { margin: 20px 0 0; } html.nav-css-v24 .legal-actions { margin-top: 20px; } html.nav-css-v24 .auth-links, html.nav-css-v24 .legal-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } html.nav-css-v24 .auth-simple { min-height: 100dvh; display: grid; place-items: center; background: #f4d7a1; } html.nav-css-v24 .auth-simple .login-wrap { width: min(480px,100%); } @media (max-width:800px) { html.nav-css-v24 body.auth-page:has(>.visual) { grid-template-columns: 1fr; } html.nav-css-v24 .auth-page>.visual { min-height: 30vh; max-height: 36vh; } html.nav-css-v24 .login-wrap { padding: 24px 20px; } html.nav-css-v24 .account-grid { grid-template-columns: 1fr; } html.nav-css-v24 .account-card { height: auto; } html.nav-css-v24 .equipment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } html.nav-css-v24 .trip-player-title { align-items: flex-start; } html.nav-css-v24 .back-trips { font-size: .86rem; } html.nav-css-v24 .player-controls #viewHint { width: 100%; margin-left: 0; } } @media (max-width:600px) { html.nav-css-v24 .portal-main { width: calc(100% - 24px); } html.nav-css-v24 .app-header { padding-right: max(10px,env(safe-area-inset-right)); padding-left: max(10px,env(safe-area-inset-left)); } html.nav-css-v24 .nav-trip-cards { grid-template-columns: minmax(0,1fr); } html.nav-css-v24 .trip-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } html.nav-css-v24 .equipment-grid { grid-template-columns: minmax(0,1fr); } html.nav-css-v24 .trip-player { padding: 12px; } html.nav-css-v24 .trip-player-title { display: grid; } html.nav-css-v24 .back-trips { justify-self: start; } html.nav-css-v24 .player-controls { gap: 7px; } html.nav-css-v24 .player-controls #viewHint { display: none; } html.nav-css-v24 .recovery-codes { grid-template-columns: 1fr; } html.nav-css-v24 .storage-actions>* { width: 100%; } } @media (max-width:430px) { html.nav-css-v24 .trip-card-head { grid-template-columns: minmax(0,1fr) auto; } html.nav-css-v24 .trip-title-form { grid-template-columns: minmax(0,1fr) auto auto auto; } html.nav-css-v24 .trip-stats b { white-space: normal; } html.nav-css-v24 .navigation-page .navigation-hud { left: max(8px,env(safe-area-inset-left)); right: max(8px,env(safe-area-inset-right)); bottom: max(8px,env(safe-area-inset-bottom)); } } /* ============================================================ 05 · NAVIGATION CARTOGRAPHIQUE Source 24.9.23 : assets/navigation.css ============================================================ */ html.nav-css-navigation { --bg: #163d3b; --panel: #f4d7a1; --panel-dark: #1f5652; --accent: #de7d55; --text: #173f3d; --white: #fffaf0; --muted: #6d7f78; --danger: #bf4b4b; --safe: #27745e; --shadow: 0 12px 28px rgba(32,68,61,.22); --nav-icon-color: #173f3d; --nav-icon-bg: #f4d7a1; --port-icon-color: #fff; --port-icon-bg: #205d58; --parking-icon-color: #fff; --parking-icon-bg: #d57a4b; --mooring-icon-color: #fff; --mooring-icon-bg: #205d58; } html.nav-css-navigation:has(body.navigation-page) { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #b8d8d3; } html.nav-css-navigation body.navigation-page { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; overflow: hidden; background: #b8d8d3; color: var(--text); font-family: "DM Sans",system-ui,sans-serif; } html.nav-css-navigation .navigation-page * { box-sizing: border-box; } /*html.nav-css-navigation .navigation-page button, html.nav-css-navigation .navigation-page a { font: inherit; }*/ html.nav-css-navigation .navigation-page .hidden { display: none !important; } html.nav-css-navigation .navigation-page #map { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; background: #b8d8d3; } html.nav-css-navigation .navigation-page .leaflet-container { font-family: "DM Sans",system-ui,sans-serif; } html.nav-css-navigation .navigation-page .leaflet-overlay-pane canvas, html.nav-css-navigation .navigation-page .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } html.nav-css-navigation .navigation-page .leaflet-top.leaflet-left { top: max(76px,calc(60px + env(safe-area-inset-top))); left: max(10px,env(safe-area-inset-left)); } html.nav-css-navigation .navigation-page .leaflet-control-zoom { margin: 0; } html.nav-css-navigation .navigation-page .leaflet-control-zoom a { color: var(--text); background: var(--white); border-color: rgba(23,63,61,.18); } html.nav-css-navigation .map-topbar { position: fixed; z-index: 900; top: max(8px,env(safe-area-inset-top)); left: max(8px,env(safe-area-inset-left)); right: max(8px,env(safe-area-inset-right)); min-height: 58px; display: flex; justify-content: center; align-items: center; padding: 7px 5px; border: 2px solid rgba(255,255,255,.5); border-radius: 20px; background: rgba(244,215,161,.94); box-shadow: var(--shadow); backdrop-filter: blur(14px); } html.nav-css-navigation .map-topbar .topbar-actions { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: center; gap: 2px; } html.nav-css-navigation .map-topbar .top-actions { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: space-evenly; gap: 1px; white-space: nowrap; } html.nav-css-navigation .map-topbar .top-actions a, html.nav-css-navigation .map-topbar .layers-trigger { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; margin: 0; overflow: hidden; border: 0; border-radius: 11px; background: transparent; color: #70847f; text-decoration: none; cursor: pointer; } html.nav-css-navigation .map-topbar .top-actions a.active { background: var(--nav-icon-bg); color: var(--nav-icon-color); box-shadow: inset 0 0 0 1px rgba(23,63,61,.1); } html.nav-css-navigation .map-topbar .top-actions a.disabled { opacity: .3; pointer-events: none; } html.nav-css-navigation .map-topbar .material-symbols-rounded { font-size: 23px; } html.nav-css-navigation .demo-banner { position: fixed; z-index: 880; top: max(78px,calc(68px + env(safe-area-inset-top))); left: 50%; max-width: calc(100% - 20px); transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--accent); color: var(--white); box-shadow: var(--shadow); font-size: 12px; text-align: center; } html.nav-css-navigation .navigation-hud { position: fixed; z-index: 910; left: max(8px,env(safe-area-inset-left)); right: max(8px,env(safe-area-inset-right)); bottom: max(8px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; gap: 7px; pointer-events: none; } html.nav-css-navigation .navigation-hud .controls, html.nav-css-navigation .navigation-hud .instrument-panel { pointer-events: auto; } html.nav-css-navigation .navigation-hud .weather-strip { pointer-events: auto; } html.nav-css-navigation .navigation-hud .controls { order: 1; position: static; display: flex; justify-content: flex-end; gap: 6px; padding-right: 2px; } html.nav-css-navigation .round-control { display: grid; place-items: center; width: 51px; height: 51px; padding: 0; border: 2px solid rgba(255,255,255,.55); border-radius: 16px; background: var(--nav-icon-bg); color: var(--nav-icon-color); box-shadow: var(--shadow); cursor: pointer; transition: background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease; } html.nav-css-navigation .round-control .material-symbols-rounded { font-size: 27px; color: inherit; } html.nav-css-navigation .round-control.active { background: var(--accent); color: #fffaf0; transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(222,125,85,.24),var(--shadow); } html.nav-css-navigation .weather-strip { order: 2; position: relative; display: grid; gap: 5px; width: 100%; padding: 7px 9px 9px; border: 2px solid rgba(255,255,255,.5); border-radius: 17px; background: rgba(255,250,240,.96); box-shadow: var(--shadow); backdrop-filter: blur(12px); } html.nav-css-navigation .weather-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; } html.nav-css-navigation .weather-strip-actions { display: flex; gap: 4px; } html.nav-css-navigation .weather-strip-actions button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9px; background: rgba(31,86,82,.1); color: var(--text); } html.nav-css-navigation .weather-strip-actions .material-symbols-rounded { font-size: 17px !important; } html.nav-css-navigation .weather-strip-actions button.loading .material-symbols-rounded { animation: weatherSpin .8s linear infinite; } html.nav-css-navigation .weather-compact { display: grid; gap: 4px; } html.nav-css-navigation .weather-compact-row { display: grid; grid-template-columns: 66px repeat(5,minmax(0,1fr)); gap: 4px; align-items: stretch; } html.nav-css-navigation .weather-row-label { display: grid; align-content: center; font-size: 9px; font-weight: 700; line-height: 1.15; color: var(--text); } html.nav-css-navigation .weather-cell { min-width: 0; padding: 4px 2px; border-radius: 8px; background: rgba(31,86,82,.06); text-align: center; } html.nav-css-navigation .weather-cell small, html.nav-css-navigation .weather-cell b, html.nav-css-navigation .weather-cell em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.nav-css-navigation .weather-cell small { font-size: 8px; color: var(--muted); } html.nav-css-navigation .weather-cell b { font-size: 10px; } html.nav-css-navigation .weather-cell em { min-height: 9px; font-size: 7px; font-style: normal; color: var(--muted); } html.nav-css-navigation .weather-loading { grid-column: 1/-1; margin: 3px; text-align: center; font-size: 10px; color: var(--muted); } html.nav-css-navigation .weather-strip.weather-safe { border-color: rgba(39,116,94,.55); } html.nav-css-navigation .weather-strip.weather-warn { border-color: #b57523; background: rgba(255,239,202,.97); } html.nav-css-navigation .weather-strip.weather-danger { border-color: #a8393f; background: rgba(255,224,220,.98); animation: navPulse 1.2s infinite alternate; } html.nav-css-navigation .navigation-hud .instrument-panel { order: 2; position: static; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 9px; width: 100%; margin: 0; padding: 10px; border: 2px solid rgba(255,255,255,.5); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); } html.nav-css-navigation .weather-strip+.instrument-panel { order: 3; } html.nav-css-navigation .speed { display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid rgba(23,63,61,.18); } html.nav-css-navigation .speed span { font-size: 36px; font-weight: 700; line-height: 1; color: var(--text); } html.nav-css-navigation .speed small { color: var(--muted); } html.nav-css-navigation .metrics { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; min-width: 0; } html.nav-css-navigation .metrics>div { min-width: 0; padding: 7px; border-radius: 12px; background: rgba(255,250,240,.55); cursor: default; transition: .18s ease; } html.nav-css-navigation .metrics>div:has(#heading) { cursor: pointer; } html.nav-css-navigation .metrics>div:has(#heading).active { outline: 2px solid var(--accent); } html.nav-css-navigation .metrics>div.metric-safe { background: #27745e; color: #fff; } html.nav-css-navigation .metrics>div.metric-warn { background: #7a5a25; color: #fff; } html.nav-css-navigation .metrics>div.metric-danger { background: #7c3137; color: #fff; animation: navPulse 1.2s infinite alternate; } html.nav-css-navigation .metrics label { display: block; color: var(--muted); font-size: 11px; } html.nav-css-navigation .metrics b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } html.nav-css-navigation .zone { grid-column: 1/-1; padding: 8px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 13px; } html.nav-css-navigation .zone.neutral { background: rgba(23,63,61,.1); } html.nav-css-navigation .zone.safe { background: rgba(39,116,94,.16); color: #1d614e; } html.nav-css-navigation .zone.warn { background: rgba(242,153,74,.2); color: #84420b; } html.nav-css-navigation .zone.danger { background: rgba(191,75,75,.18); color: #8c2727; } html.nav-css-navigation .zone.land { background: rgba(54,112,100,.17); color: #275d52; } html.nav-css-navigation .zone.speeding { background: rgba(191,75,75,.28); color: #8c2727; animation: navPulse 1.2s infinite alternate; } @keyframes navPulse { to { filter: brightness(1.15); } } html.nav-css-navigation .drawer { position: fixed; z-index: 1200; top: 0; right: 0; bottom: 0; width: 350px; padding: max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); overflow: auto; background: var(--panel); color: var(--text); box-shadow: -15px 0 40px rgba(0,0,0,.25); } html.nav-css-navigation .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } html.nav-css-navigation .drawer .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: pointer; } html.nav-css-navigation .drawer label { display: block; padding: 13px 0; border-bottom: 1px solid rgba(23,63,61,.15); font-size: 14px; } html.nav-css-navigation .drawer input { width: auto; margin-right: 10px; accent-color: var(--accent); } html.nav-css-navigation .drawer hr { border: 0; border-top: 1px solid rgba(23,63,61,.15); margin: 16px 0; } html.nav-css-navigation .trip-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: var(--muted); } html.nav-css-navigation .trip-grid b { color: var(--text); } html.nav-css-navigation .drawer-link { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px; border-radius: 12px; background: rgba(31,86,82,.1); color: var(--text); text-decoration: none; } html.nav-css-navigation .drawer .danger { width: 100%; min-height: 44px; margin-top: 10px; border: 0; border-radius: 12px; background: rgba(191,75,75,.13); color: #8c2727; cursor: pointer; } html.nav-css-navigation .note { color: var(--muted); font-size: 12px; line-height: 1.45; } html.nav-css-navigation .layer-health { display: grid; gap: 9px; } html.nav-css-navigation .layer-health>strong { margin-bottom: 3px; } html.nav-css-navigation .layer-health-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } html.nav-css-navigation .layer-health-row span { color: var(--muted); } html.nav-css-navigation .layer-health-row b { font-size: 12px; text-align: right; } html.nav-css-navigation .layer-health-row.failed b, html.nav-css-navigation .layer-health-error { color: #8c2727; } html.nav-css-navigation .layer-health-error { font-size: 12px; line-height: 1.4; margin: 4px 0 0; } html.nav-css-navigation .weather-details { scroll-margin-top: 12px; } html.nav-css-navigation .weather-details-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html.nav-css-navigation .weather-refresh { display: grid !important; place-items: center; width: 38px !important; height: 38px !important; padding: 0 !important; border: 0; border-radius: 11px; background: rgba(31,86,82,.1); color: var(--text); } html.nav-css-navigation .weather-refresh.loading .material-symbols-rounded { animation: weatherSpin .8s linear infinite; } @keyframes weatherSpin { to { transform: rotate(360deg); } } html.nav-css-navigation .weather-current { display: grid; gap: 6px; margin: 10px 0; } html.nav-css-navigation .weather-current .weather-compact-row { grid-template-columns: 66px repeat(5,minmax(0,1fr)); } html.nav-css-navigation .weather-direction { display: inline-block; line-height: 1; transform-origin: center; } html.nav-css-navigation .weather-forecast { display: grid; gap: 5px; margin-top: 12px; } html.nav-css-navigation .weather-hour { display: grid; grid-template-columns: 1.2fr repeat(5,minmax(0,.8fr)); gap: 5px; align-items: center; padding: 7px 3px; border-bottom: 1px solid rgba(23,63,61,.12); font-size: 11px; } html.nav-css-navigation .weather-hour-head { font-weight: 700; color: var(--muted); } html.nav-css-navigation .weather-hour time { font-weight: 600; } html.nav-css-navigation .weather-hour span { text-align: right; } html.nav-css-navigation .weather-hour span small { display: block; font-size: 8px; color: var(--muted); } html.nav-css-navigation .weather-source { margin-top: 10px; } html.nav-css-navigation .toast { position: fixed; z-index: 1500; top: max(78px,calc(70px + env(safe-area-inset-top))); left: 16px; right: 16px; max-width: 520px; margin: auto; padding: 14px; border-radius: 16px; background: var(--white); color: var(--text); box-shadow: var(--shadow); text-align: center; } html.nav-css-navigation .modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(13,53,50,.55); } html.nav-css-navigation .modal-card { width: min(390px,100%); padding: 25px; border: 2px solid rgba(255,255,255,.65); border-radius: 26px; background: var(--panel); box-shadow: 0 22px 70px rgba(0,0,0,.3); text-align: center; } html.nav-css-navigation .modal-icon { font-size: 42px; color: var(--panel-dark); } html.nav-css-navigation .modal-card h2 { margin: 8px 0; } html.nav-css-navigation .modal-card p { color: #4d6963; line-height: 1.5; } html.nav-css-navigation .dont-show { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0; font-size: 13px; } html.nav-css-navigation .dont-show input { width: auto; } html.nav-css-navigation .modal-card button { min-height: 44px; padding: 11px 22px; border: 0; border-radius: 12px; background: var(--panel-dark); color: white; font-weight: 700; cursor: pointer; } html.nav-css-navigation .onboard-actions { display: flex; gap: 10px; margin-top: 16px; } html.nav-css-navigation .onboard-actions button { flex: 1; } html.nav-css-navigation .onboard-count { display: block; margin-top: 12px; opacity: .7; } html.nav-css-navigation .map-icon-wrap { background: transparent; border: 0; } html.nav-css-navigation .map-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--white); border-radius: 50%; background: var(--port-icon-bg); color: var(--port-icon-color); box-shadow: 0 3px 12px rgba(0,0,0,.3); } html.nav-css-navigation .parking-icon { background: var(--parking-icon-bg); color: var(--parking-icon-color); } html.nav-css-navigation .mooring-icon { background: var(--mooring-icon-bg); color: var(--mooring-icon-color); } html.nav-css-navigation .boat-marker { display: grid; place-items: center; width: 44px; height: 44px; border: 4px solid var(--accent); border-radius: 50%; background: var(--panel); color: var(--panel-dark); box-shadow: 0 0 0 7px rgba(222,125,85,.22),0 4px 16px rgba(0,0,0,.3); } html.nav-css-navigation .boat-marker>.material-symbols-rounded { font-size: 28px; transform: rotate(-45deg); } html.nav-css-navigation .line-label { font-family: "DM Sans",sans-serif; font-weight: 700; text-align: center; white-space: nowrap; text-shadow: 0 1px 2px rgba(255,255,255,.95),0 -1px 2px rgba(255,255,255,.95); transform-origin: center; pointer-events: none; } html.nav-css-navigation .map-popup h3 { margin: 0 0 4px; } html.nav-css-navigation .map-popup p { margin: 4px 0; } html.nav-css-navigation .popup-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 7px 0; } html.nav-css-navigation .popup-tags span { padding: 3px 6px; border-radius: 999px; background: #e8dcc1; font-size: 11px; } html.nav-css-navigation .leaflet-popup-content-wrapper { border-radius: 16px; background: var(--white); color: var(--text); } html.nav-css-navigation .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width:390px) { html.nav-css-navigation .map-topbar .top-actions a, html.nav-css-navigation .map-topbar .layers-trigger { flex-basis: 35px; width: 35px; height: 35px; } html.nav-css-navigation .map-topbar .material-symbols-rounded { font-size: 21px; } html.nav-css-navigation .round-control { width: 45px; height: 45px; } html.nav-css-navigation .navigation-hud .instrument-panel { grid-template-columns: 86px minmax(0,1fr); padding: 9px; } html.nav-css-navigation .speed span { font-size: 32px; } html.nav-css-navigation .metrics>div { padding: 6px; } html.nav-css-navigation .weather-strip { padding-left: 6px; padding-right: 6px; } html.nav-css-navigation .weather-compact-row { grid-template-columns: 54px repeat(5,minmax(0,1fr)); gap: 2px; } html.nav-css-navigation .weather-cell { padding-left: 1px; padding-right: 1px; } html.nav-css-navigation .weather-cell b { font-size: 9px; } html.nav-css-navigation .weather-cell small { font-size: 7px; } } @media (min-width:721px) { html.nav-css-navigation .map-topbar { left: auto; right: 18px; top: 18px; width: auto; min-height: 62px; padding: 8px 10px; } html.nav-css-navigation .map-topbar .topbar-actions { width: auto; } html.nav-css-navigation .map-topbar .top-actions { flex: none; gap: 3px; } html.nav-css-navigation .map-topbar .top-actions a, html.nav-css-navigation .map-topbar .layers-trigger { flex-basis: 42px; width: 42px; height: 42px; } html.nav-css-navigation .navigation-page .leaflet-top.leaflet-left { top: 18px; left: 18px; } html.nav-css-navigation .navigation-hud { left: auto; right: 18px; bottom: 18px; width: 430px; align-items: flex-end; } html.nav-css-navigation .navigation-hud .instrument-panel { width: 430px; } html.nav-css-navigation .navigation-hud .controls { justify-content: flex-end; } } @media (orientation:landscape) and (max-height:620px) { html.nav-css-navigation .map-topbar { top: max(6px,env(safe-area-inset-top)); left: max(8px,env(safe-area-inset-left)); right: auto; width: auto; } html.nav-css-navigation .navigation-page .leaflet-top.leaflet-left { top: max(64px,calc(54px + env(safe-area-inset-top))); left: env(safe-area-inset-left); } html.nav-css-navigation .navigation-hud { left: auto; right: max(8px,env(safe-area-inset-right)); bottom: max(8px,env(safe-area-inset-bottom)); width: min(430px,48vw); } html.nav-css-navigation .navigation-hud .instrument-panel { grid-template-columns: 82px minmax(0,1fr); } html.nav-css-navigation .round-control { width: 44px; height: 44px; } html.nav-css-navigation .speed span { font-size: 30px; } } @media (min-width:1600px) { html.nav-css-navigation .map-topbar { right: 28px; top: 28px; } html.nav-css-navigation .navigation-page .leaflet-top.leaflet-left { top: 28px; left: 28px; } html.nav-css-navigation .navigation-hud { right: 28px; bottom: 28px; width: 480px; } html.nav-css-navigation .navigation-hud .instrument-panel { width: 480px; padding: 16px; } } /* NAV 24.9.1 - consolidated navigation HUD */ html.nav-css-navigation .speed, html.nav-css-navigation #speed { cursor: pointer; user-select: none; -webkit-user-select: none; } html.nav-css-navigation .metrics>div.metric-warn { background: #f6d59a; color: #5f3a00; animation: none; } html.nav-css-navigation .metrics>div.metric-danger { background: #f3a6a6; color: #6f1f24; animation: navPulse 1.2s infinite alternate; } html.nav-css-navigation .zone.warn { background: #f8dfad; color: #6b4208; } html.nav-css-navigation .zone.danger, html.nav-css-navigation .zone.speeding { background: #f3b2b2; color: #711f25; } html.nav-css-navigation .boat-marker>.material-symbols-rounded { font-size: 28px; transform: none; } html.nav-css-navigation .navigation-hud.reduced { align-items: flex-end; } html.nav-css-navigation .navigation-hud.reduced .controls, html.nav-css-navigation .navigation-hud.reduced .weather-strip { display: none !important; } html.nav-css-navigation .navigation-hud .instrument-panel.reduced { width: auto; min-width: 176px; grid-template-columns: 82px 82px; gap: 5px; padding: 7px 8px; border-radius: 16px; } html.nav-css-navigation .instrument-panel.reduced .speed { border-right: 1px solid rgba(23,63,61,.18); padding-right: 5px; } html.nav-css-navigation .instrument-panel.reduced .speed span { font-size: 25px; } html.nav-css-navigation .instrument-panel.reduced .speed small { font-size: 9px; } html.nav-css-navigation .instrument-panel.reduced .metrics { display: contents; } html.nav-css-navigation .instrument-panel.reduced .metrics>div { display: none; } html.nav-css-navigation .instrument-panel.reduced .metrics>.metric-heading { display: flex; flex-direction: column; justify-content: center; padding: 5px 7px; } html.nav-css-navigation .instrument-panel.reduced .metrics>.metric-heading label { font-size: 9px; } html.nav-css-navigation .instrument-panel.reduced .metrics>.metric-heading b { font-size: 16px; } html.nav-css-navigation .instrument-panel.reduced .zone { display: none; } /* NAV 24.9.1 production consolidation */ html.nav-css-navigation .navigation-hud .controls { flex-wrap: nowrap; } @media (max-width:390px) { html.nav-css-navigation .navigation-hud .controls { gap: 4px; } html.nav-css-navigation .navigation-hud .controls .round-control { width: 43px; height: 43px; border-radius: 14px; } html.nav-css-navigation .navigation-hud .controls .material-symbols-rounded { font-size: 24px; } } html.nav-css-navigation .equipment-icon.material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; } /* ============================================================ 06 · BADGES / CHECKLISTS / GUIDE Source 24.9.23 : assets/v24921.css ============================================================ */ /* NAV 24.9.19 — consolidation UI */ html.nav-css-v24921 .g18-main { max-width: 1180px; margin: 0 auto; padding: 34px 18px 70px; } html.nav-css-v24921 .g18-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; } html.nav-css-v24921 .g18-head h1 { margin: .2rem 0; font-size: clamp(2.2rem,6vw,4rem); } html.nav-css-v24921 .g18-head>div:first-child>p:last-child { max-width: 650px; } html.nav-css-v24921 .g18-stats { display: flex; gap: 10px; } html.nav-css-v24921 .g18-stats div { min-width: 96px; border: 1px solid rgba(23,63,61,.16); border-radius: 16px; padding: 12px; background: var(--theme-panel,#fffaf0); text-align: center; } html.nav-css-v24921 .g18-stats b { display: block; font-size: 1.7rem; } html.nav-css-v24921 .g18-stats span { font-size: .8rem; opacity: .7; } html.nav-css-v24921 .g18-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } html.nav-css-v24921 .g18-badge { appearance: none; text-align: left; border: 1px solid rgba(23,63,61,.17); border-radius: 18px; padding: 18px; background: var(--theme-panel,#fffaf0); color: var(--theme-text,#173f3d); min-height: 190px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform .16s ease,border-color .16s ease; } html.nav-css-v24921 .g18-badge:hover { transform: translateY(-2px); border-color: var(--theme-accent,#de7d55); } html.nav-css-v24921 .g18-badge.locked { opacity: .72; } html.nav-css-v24921 .g18-icon { font-size: 42px; } html.nav-css-v24921 .g18-category, html.nav-css-v24921 .g18-earned { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .68; } html.nav-css-v24921 .g18-earned { margin-top: auto; color: #176b45; opacity: 1; font-weight: 700; } html.nav-css-v24921 .g18-progress { height: 7px; border-radius: 9px; background: rgba(23,63,61,.12); overflow: hidden; margin-top: auto; } html.nav-css-v24921 .g18-progress i { display: block; height: 100%; background: var(--theme-accent,#de7d55); } html.nav-css-v24921 .g18-badge small { opacity: .7; } html.nav-css-v24921 .g18-dialog { border: 0; border-radius: 22px; padding: 26px; max-width: 560px; width: calc(100% - 28px); background: var(--theme-panel,#fffaf0); color: var(--theme-text,#173f3d); box-shadow: 0 24px 80px rgba(0,0,0,.24); } html.nav-css-v24921 .g18-dialog::backdrop { background: rgba(9,25,24,.58); backdrop-filter: blur(4px); } html.nav-css-v24921 .g18-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; color: inherit; font-size: 30px; cursor: pointer; } html.nav-css-v24921 .g18-dialog-icon { font-size: 54px; } html.nav-css-v24921 .g18-dialog-category { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; opacity: .66; } html.nav-css-v24921 .g18-dialog h2 { font-size: 2rem; margin: .2rem 0 1rem; } html.nav-css-v24921 .g18-dialog-story { font-size: 1.08rem; line-height: 1.6; } html.nav-css-v24921 .g18-detail { border-top: 1px solid rgba(23,63,61,.13); padding-top: 14px; margin-top: 14px; } html.nav-css-v24921 .g18-detail p { margin: .4rem 0; line-height: 1.55; } html.nav-css-v24921 .g18-dialog-meta { margin-top: 18px; border-radius: 14px; background: rgba(23,63,61,.07); padding: 12px; font-size: .9rem; } html.nav-css-v24921 .nav18-guide { min-height: 100dvh; background: var(--theme-bg,#f7ead0); color: var(--theme-text,#173f3d); display: grid; place-items: center; padding: 18px; } html.nav-css-v24921 .nav18-guide-shell { width: min(920px,100%); background: var(--theme-panel,#fffaf0); border: 1px solid rgba(23,63,61,.14); border-radius: 28px; overflow: hidden; } html.nav-css-v24921 .nav18-guide-progress { height: 5px; background: rgba(23,63,61,.1); } html.nav-css-v24921 .nav18-guide-progress i { display: block; height: 100%; background: var(--theme-accent,#de7d55); transition: width .25s ease; } html.nav-css-v24921 .nav18-guide-inner { padding: clamp(24px,6vw,58px); min-height: 590px; display: flex; flex-direction: column; } html.nav-css-v24921 .nav18-guide-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } html.nav-css-v24921 .nav18-guide-brand { font-weight: 800; letter-spacing: .14em; width:70px; } html.nav-css-v24921 .nav18-guide-skip { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; } html.nav-css-v24921 .nav18-guide-step { display: none; flex: 1; align-content: center; padding: 34px 0; } html.nav-css-v24921 .nav18-guide-step.active { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); gap: 40px; align-items: center; } html.nav-css-v24921 .nav18-guide-step h1, html.nav-css-v24921 .nav18-guide-step h2 { font-size: clamp(2rem,5vw,3.5rem); line-height: 1.02; margin: .4rem 0 1rem; } html.nav-css-v24921 .nav18-guide-step p { line-height: 1.6; } html.nav-css-v24921 .nav18-guide-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-accent,#de7d55); } html.nav-css-v24921 .nav18-visual { border-radius: 24px; background: var(--theme-dark,#173f3d); color: #fffaf0; min-height: 300px; padding: 24px; display: grid; align-content: center; gap: 12px; } html.nav-css-v24921 .nav18-visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } html.nav-css-v24921 .nav18-mini { border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 12px; } html.nav-css-v24921 .nav18-mini b { display: block; font-size: 1.25rem; } html.nav-css-v24921 .nav18-alerts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } html.nav-css-v24921 .nav18-alerts span { border-radius: 10px; padding: 10px; text-align: center; background: rgba(255,255,255,.12); } html.nav-css-v24921 .nav18-alerts .warn { background: #9f6b20; } html.nav-css-v24921 .nav18-alerts .danger { background: #9d3731; } html.nav-css-v24921 .nav18-checks { display: grid; gap: 10px; } html.nav-css-v24921 .nav18-checks div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.1); } html.nav-css-v24921 .nav18-guide-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; } html.nav-css-v24921 .nav18-guide-actions button, html.nav-css-v24921 .nav18-guide-actions a { border-radius: 12px; padding: 12px 18px; text-decoration: none; font-weight: 700; } html.nav-css-v24921 .nav18-back { border: 1px solid rgba(23,63,61,.2); background: transparent; color: inherit; } html.nav-css-v24921 .nav18-next { border: 0; background: var(--theme-dark,#173f3d); color: #fffaf0; } html.nav-css-v24921 .nav18-dots { font-size: .85rem; opacity: .65; } html.nav-css-v24921 .nav18-release-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(9,25,24,.58); display: grid; place-items: center; padding: 18px; backdrop-filter: blur(4px); } html.nav-css-v24921 .nav18-release-card { width: min(560px,100%); border-radius: 24px; background: var(--theme-panel,#fffaf0); color: var(--theme-text,#173f3d); padding: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.25); } html.nav-css-v24921 .nav18-release-card h2 { font-size: 2rem; margin: .25rem 0 1rem; } html.nav-css-v24921 .nav18-release-card ul { padding-left: 1.2rem; line-height: 1.55; } html.nav-css-v24921 .nav18-release-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } html.nav-css-v24921 .nav18-release-actions button, html.nav-css-v24921 .nav18-release-actions a { border-radius: 11px; padding: 11px 15px; font-weight: 700; text-decoration: none; } html.nav-css-v24921 .nav18-release-actions button { border: 0; background: var(--theme-dark,#173f3d); color: #fffaf0; } html.nav-css-v24921 .nav18-release-actions a { border: 1px solid rgba(23,63,61,.2); color: inherit; } html.nav-css-v24921 .compat-control { display: none !important; } html.nav-css-v24921 .drawer-handle { position: fixed; right: 0; top: 50%; z-index: 1950; width: 20px; height: 82px; transform: translateY(-50%); border: 0; border-radius: 10px 0 0 10px; background: var(--nav-icon-bg); box-shadow: 0 4px 16px rgba(9,25,24,.18); cursor: pointer; padding: 0; display: grid; place-items: center; transition: width .18s ease,opacity .18s ease,background .18s ease; } html.nav-css-v24921 .drawer-handle:hover, html.nav-css-v24921 .drawer-handle:focus-visible { width: 25px; background: var(--nav-icon-bg); outline: none; } html.nav-css-v24921 .drawer-handle-grip, html.nav-css-v24921 .drawer-handle-grip::before, html.nav-css-v24921 .drawer-handle-grip::after { display: block; width: 2px; height: 24px; border-radius: 3px; background: rgba(255,250,240,.78); content: ""; } html.nav-css-v24921 .drawer-handle-grip { position: relative; } html.nav-css-v24921 .drawer-handle-grip::before { position: absolute; left: -4px; top: 0; opacity: .6; } html.nav-css-v24921 .drawer-handle-grip::after { position: absolute; left: 4px; top: 0; opacity: .6; } html.nav-css-v24921 .drawer-handle.is-open { opacity: 0; pointer-events: none; } html.nav-css-v24921 .drawer-switch-list { display: grid; gap: 6px; } html.nav-css-v24921 .drawer-switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; padding: 9px 2px !important; cursor: pointer; border-bottom: 1px solid rgba(23,63,61,.08); } html.nav-css-v24921 .drawer-switch-row>span:first-child { min-width: 0; } html.nav-css-v24921 .drawer-switch-row strong { display: block; font-size: .94rem; line-height: 1.2; } html.nav-css-v24921 .drawer-switch-row small { display: block; margin-top: 4px; font-size: .76rem; line-height: 1.25; opacity: .62; } html.nav-css-v24921 .switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; } html.nav-css-v24921 .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } html.nav-css-v24921 .switch-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(23,63,61,.18); border: 1px solid rgba(23,63,61,.16); transition: background .18s ease,border-color .18s ease; } html.nav-css-v24921 .switch-track::after { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; border-radius: 50%; background: var(--theme-panel,#fffaf0); box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .18s ease; } html.nav-css-v24921 .switch input:checked+.switch-track { background: var(--theme-dark,#173f3d); border-color: var(--theme-dark,#173f3d); } html.nav-css-v24921 .switch input:checked+.switch-track::after { transform: translateX(20px); } html.nav-css-v24921 .switch input:focus-visible+.switch-track { outline: 3px solid rgba(222,125,85,.34); outline-offset: 2px; } html.nav-css-v24921 .weather-rain-switch { margin-top: 8px; padding-top: 14px !important; border-top: 1px solid rgba(23,63,61,.14); } @media (max-width:800px) { html.nav-css-v24921 .g18-head { align-items: flex-start; flex-direction: column; } html.nav-css-v24921 .g18-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } html.nav-css-v24921 .nav18-guide-step.active { grid-template-columns: 1fr; } html.nav-css-v24921 .nav18-visual { min-height: 220px; } html.nav-css-v24921 .nav18-guide-inner { min-height: 0; } html.nav-css-v24921 .nav18-guide-step { padding: 24px 0; } html.nav-css-v24921 .nav18-release-actions { flex-direction: column; } html.nav-css-v24921 .nav18-release-actions>* { text-align: center; } } @media (max-width:480px) { html.nav-css-v24921 .g18-grid { grid-template-columns: 1fr; } html.nav-css-v24921 .g18-stats { width: 100%; } html.nav-css-v24921 .g18-stats div { flex: 1; } html.nav-css-v24921 .nav18-guide { padding: 0; } html.nav-css-v24921 .nav18-guide-shell { border-radius: 0; min-height: 100dvh; } html.nav-css-v24921 .nav18-guide-inner { padding: 22px 18px; } html.nav-css-v24921 .nav18-guide-top { margin-bottom: 4px; } html.nav-css-v24921 .drawer-handle { height: 70px; } } /* NAV 24.9.21 — UI/cache consolidation */ html.nav-css-v24921 .reset-trip-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } html.nav-css-v24921 .reset-trip-actions .danger { background: #a92f2a; color: #fff; border-color: #a92f2a; } html.nav-css-v24921 .controls #weatherRainBtn.active { box-shadow: 0 0 0 3px rgba(222,125,85,.24); background: var(--theme-dark,#173f3d); color: #fffaf0; } html.nav-css-v24921 .drawer-handle { background: var(--nav-icon-bg,var(--theme-control,#f4d7a1)); color: var(--nav-icon-fg,var(--theme-text,#173f3d)); border: 1px solid rgba(23,63,61,.14); } html.nav-css-v24921 .drawer-handle:hover, html.nav-css-v24921 .drawer-handle:focus-visible { background: var(--nav-icon-bg,var(--theme-control,#f4d7a1)); } html.nav-css-v24921 .drawer-handle .material-symbols-rounded { font-size: 20px; } /* Onboarding: reproduce NAV rather than generic illustrations */ html.nav-css-v24921 .nav18-guide { background: var(--theme-bg,#f7ead0); } html.nav-css-v24921 .nav18-guide-shell { background: var(--theme-panel,#fffaf0); } html.nav-css-v24921 .nav18-visual { display: none; } html.nav-css-v24921 .guide-ui { border-radius: 24px; background: #dce7e5; color: var(--theme-text,#173f3d); min-height: 320px; padding: 18px; position: relative; overflow: hidden; border: 1px solid rgba(23,63,61,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } html.nav-css-v24921 .guide-map { background: linear-gradient(145deg,#d7e8cf 0 30%,#b6d9eb 30% 66%,#d7e8cf 66%); } html.nav-css-v24921 .guide-water { position: absolute; inset: 62px 0 0; background: linear-gradient(160deg,transparent 0 13%,rgba(48,146,196,.45) 13% 68%,transparent 68%); } html.nav-css-v24921 .guide-top-icons { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: center; gap: 8px; z-index: 2; } html.nav-css-v24921 .guide-top-icons span, html.nav-css-v24921 .guide-controls span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--nav-icon-bg,var(--theme-control,#f4d7a1)); color: var(--nav-icon-fg,var(--theme-text,#173f3d)); box-shadow: 0 4px 14px rgba(0,0,0,.09); } html.nav-css-v24921 .guide-hud-dot { position: absolute; right: 26%; bottom: 28%; width: 58px; height: 58px; border-radius: 50%; background: var(--theme-accent,#de7d55); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255,250,240,.45); } html.nav-css-v24921 .guide-boat { background: var(--theme-panel,#fffaf0); display: grid; align-content: center; gap: 18px; } html.nav-css-v24921 .guide-boat-title { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; } html.nav-css-v24921 .guide-boat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } html.nav-css-v24921 .guide-boat-grid>div { background: var(--theme-bg,#f7ead0); border: 1px solid rgba(23,63,61,.1); border-radius: 14px; padding: 14px; } html.nav-css-v24921 .guide-boat-grid small, html.nav-css-v24921 .guide-metrics small, html.nav-css-v24921 .guide-weather-card small { display: block; opacity: .62; margin-bottom: 4px; } html.nav-css-v24921 .guide-controls { display: flex; gap: 8px; justify-content: center; margin: 2px 0 12px; } html.nav-css-v24921 .guide-controls span.active { background: var(--theme-dark,#173f3d); color: #fffaf0; } html.nav-css-v24921 .guide-instrument { background: var(--theme-control,#f4d7a1); border: 1px solid rgba(23,63,61,.13); border-radius: 20px; padding: 12px; display: grid; grid-template-columns: 110px 1fr; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.08); } html.nav-css-v24921 .guide-speed { display: grid; place-items: center; border-right: 1px solid rgba(23,63,61,.18); } html.nav-css-v24921 .guide-speed b { font-size: 2.4rem; line-height: 1; } html.nav-css-v24921 .guide-speed small { opacity: .65; } html.nav-css-v24921 .guide-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html.nav-css-v24921 .guide-metrics>div { background: rgba(255,250,240,.55); border-radius: 12px; padding: 9px; } html.nav-css-v24921 .guide-metrics .warn { background: #f3c66f; } html.nav-css-v24921 .guide-zone { grid-column: 1/-1; text-align: center; background: rgba(23,63,61,.12); border-radius: 12px; padding: 8px; font-weight: 700; } html.nav-css-v24921 .guide-drawer-preview { background: var(--theme-panel,#fffaf0); padding: 18px 20px; } html.nav-css-v24921 .guide-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } html.nav-css-v24921 .guide-switch-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(23,63,61,.09); } html.nav-css-v24921 .guide-switch { width: 44px; height: 25px; border-radius: 999px; background: rgba(23,63,61,.18); display: block; position: relative; } html.nav-css-v24921 .guide-switch u { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fffaf0; transition: none; } html.nav-css-v24921 .guide-switch.on { background: var(--theme-dark,#173f3d); } html.nav-css-v24921 .guide-switch.on u { left: 22px; } html.nav-css-v24921 .guide-controls-center { margin-top: 12px; } html.nav-css-v24921 .guide-weather-card { display: flex; align-items: center; justify-content: space-between; background: var(--theme-panel,#fffaf0); border-radius: 18px; padding: 18px; margin-top: 14px; } html.nav-css-v24921 .guide-weather-card strong { display: block; font-size: 1.4rem; } html.nav-css-v24921 .guide-weather-card>span { font-size: 42px; color: #4b859d; } html.nav-css-v24921 .guide-radar { height: 110px; border-radius: 18px; margin-top: 12px; background: linear-gradient(130deg,#cbe8c8,#a7d8e8); position: relative; overflow: hidden; } html.nav-css-v24921 .guide-radar i { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .72; } html.nav-css-v24921 .guide-radar i:nth-child(1) { width: 110px; height: 70px; background: #64bd78; left: 18%; top: 24px; } html.nav-css-v24921 .guide-radar i:nth-child(2) { width: 86px; height: 58px; background: #3b87ce; left: 42%; top: 38px; } html.nav-css-v24921 .guide-radar i:nth-child(3) { width: 66px; height: 44px; background: #213e9a; left: 57%; top: 46px; } html.nav-css-v24921 .guide-checklist { background: var(--theme-panel,#fffaf0); display: grid; align-content: center; gap: 10px; } html.nav-css-v24921 .guide-check-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } html.nav-css-v24921 .guide-checklist label { display: flex; align-items: center; gap: 10px; background: var(--theme-bg,#f7ead0); border-radius: 12px; padding: 11px 12px; } html.nav-css-v24921 .guide-checklist label i { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--theme-dark,#173f3d); display: grid; place-items: center; font-style: normal; font-weight: 800; } html.nav-css-v24921 .guide-checklist label i:not(:empty) { background: var(--theme-dark,#173f3d); color: #fff; } html.nav-css-v24921 .guide-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; } html.nav-css-v24921 .guide-summary>div { background: var(--theme-panel,#fffaf0); border-radius: 18px; padding: 20px; display: grid; gap: 5px; } html.nav-css-v24921 .guide-summary .material-symbols-rounded { font-size: 42px; } html.nav-css-v24921 .guide-summary b { font-size: 1.4rem; } html.nav-css-v24921 .guide-summary small { opacity: .62; } /* Checklists */ html.nav-css-v24921 .checklists-main { width: min(1120px,calc(100% - 28px)); margin: 26px auto 80px; } html.nav-css-v24921 .checklists-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; } html.nav-css-v24921 .checklists-head h1 { margin: .2rem 0; font-size: clamp(2.1rem,6vw,3.7rem); } html.nav-css-v24921 .checklists-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } html.nav-css-v24921 .checklist-tile { background: var(--theme-panel,#fffaf0); border: 1px solid rgba(23,63,61,.14); border-radius: 20px; padding: 18px; min-height: 210px; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; } html.nav-css-v24921 .checklist-tile h2 { margin: 0; } html.nav-css-v24921 .checklist-tile .meta { opacity: .65; font-size: .86rem; } html.nav-css-v24921 .checklist-progress { height: 8px; background: rgba(23,63,61,.11); border-radius: 999px; overflow: hidden; } html.nav-css-v24921 .checklist-progress i { display: block; height: 100%; background: var(--theme-accent,#de7d55); } html.nav-css-v24921 .checklist-tile-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; } html.nav-css-v24921 .checklist-tile-actions a, html.nav-css-v24921 .checklist-tile-actions button { flex: 1 1 auto; } html.nav-css-v24921 .checklist-add { display: grid; place-items: center; min-height: 210px; border: 2px dashed rgba(23,63,61,.25); background: transparent; } html.nav-css-v24921 .checklist-add span { font-size: 54px; } html.nav-css-v24921 .checklist-editor { max-width: 760px; margin: 0 auto; background: var(--theme-panel,#fffaf0); border: 1px solid rgba(23,63,61,.13); border-radius: 22px; padding: 20px; } html.nav-css-v24921 .checklist-editor-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; } html.nav-css-v24921 .checklist-edit-actions { display: flex; gap: 8px; } html.nav-css-v24921 .checklist-icon-button { width: 44px; height: 44px; border-radius: 12px; border: 0; display: grid; place-items: center; } html.nav-css-v24921 .checklist-icon-button:hover { cursor: pointer; } html.nav-css-v24921 .checklist-icon-button.save { background: #1f7a52; color: #fff; } html.nav-css-v24921 .checklist-icon-button.cancel { background: #a92f2a; color: #fff; text-decoration: none; } html.nav-css-v24921 .checklist-form-grid { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin: 18px 0; } html.nav-css-v24921 .checklist-items { display: grid; gap: 9px; } html.nav-css-v24921 .checklist-edit-row { display: grid; grid-template-columns: 34px 32px 1fr 42px; gap: 8px; align-items: center; background: var(--theme-bg,#f7ead0); border-radius: 14px; padding: 8px; } html.nav-css-v24921 .checklist-edit-row.dragging { opacity: .45; } html.nav-css-v24921 .drag-handle { cursor: grab; touch-action: none; display: grid; place-items: center; opacity: .55; } html.nav-css-v24921 .check-placeholder { width: 22px; height: 22px; border: 2px solid rgba(23,63,61,.45); border-radius: 6px; } html.nav-css-v24921 .checklist-edit-row input { margin: 0; min-height: 42px; } html.nav-css-v24921 .remove-row { border: 0; background: transparent; color: #a92f2a; padding: 6px; } html.nav-css-v24921 .add-check-row { margin-top: 12px; } html.nav-css-v24921 .checklist-use { max-width: 760px; margin: 0 auto; } html.nav-css-v24921 .checklist-use-card { background: var(--theme-panel,#fffaf0); border: 1px solid rgba(23,63,61,.13); border-radius: 22px; padding: 20px; } html.nav-css-v24921 .checklist-use-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; } html.nav-css-v24921 .checklist-use-list { display: grid; gap: 10px; } html.nav-css-v24921 .checklist-use-item { display: flex; gap: 12px; align-items: center; background: var(--theme-bg,#f7ead0); border-radius: 14px; padding: 13px; cursor: pointer; } html.nav-css-v24921 .checklist-use-item input { width: 24px; height: 24px; accent-color: var(--theme-dark,#173f3d); } html.nav-css-v24921 .checklist-use-item.done span { text-decoration: line-through; opacity: .55; } html.nav-css-v24921 .checklist-empty { padding: 26px; text-align: center; opacity: .65; } html.nav-css-v24921 .checklist-complete-actions { display: flex; justify-content: flex-end; gap: 10px; } html.nav-css-v24921 .checklist-complete-actions .confirm { background: #1f7a52; color: white; border: 0; } @media (max-width:800px) { html.nav-css-v24921 .guide-ui { min-height: 280px; } html.nav-css-v24921 .guide-instrument { grid-template-columns: 92px 1fr; } html.nav-css-v24921 .guide-speed b { font-size: 2rem; } html.nav-css-v24921 .checklists-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } html.nav-css-v24921 .checklist-form-grid { grid-template-columns: 1fr; } html.nav-css-v24921 .checklist-editor, html.nav-css-v24921 .checklist-use { width: 100%; } } @media (max-width:560px) { html.nav-css-v24921 .guide-summary { grid-template-columns: 1fr; } html.nav-css-v24921 .guide-boat-grid { grid-template-columns: 1fr 1fr; } html.nav-css-v24921 .checklists-grid { grid-template-columns: 1fr; } html.nav-css-v24921 .checklists-head { align-items: flex-start; flex-direction: column; } html.nav-css-v24921 .checklist-edit-row { grid-template-columns: 30px 28px 1fr 38px; } } html.nav-css-v24921 .trip-view-page .back-trips { padding: 10px 14px; } /* ============================================================ 07 · AJUSTEMENTS 24.9.22 Source 24.9.23 : assets/v24922.css ============================================================ */ /* NAV 24.9.22 — corrective UI */ html.nav-css-v24922 .controls #weatherRainBtn.active, html.nav-css-v24922 .controls #weatherRainBtn[aria-pressed="true"] { background: var(--nav-icon-bg,var(--theme-control,#f4d7a1)); color: var(--nav-icon-fg,var(--theme-text,#173f3d)); box-shadow: 0 4px 14px rgba(0,0,0,.09); } html.nav-css-v24922 .checklist-tile-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; } html.nav-css-v24922 .checklist-open-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 700; background: var(--theme-dark,#173f3d); color: #fffaf0; border: 1px solid var(--theme-dark,#173f3d); } html.nav-css-v24922 .checklist-action-icon { appearance: none; border: 0; background: transparent; color: var(--theme-text,#173f3d); width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 10px; cursor: pointer; text-decoration: none; opacity: .72; } html.nav-css-v24922 .checklist-action-icon:hover, html.nav-css-v24922 .checklist-action-icon:focus-visible { opacity: 1; background: rgba(23,63,61,.07); outline: none; } html.nav-css-v24922 .checklist-action-icon.delete { color: #a92f2a; } html.nav-css-v24922 .checklist-action-icon .material-symbols-rounded { font-size: 22px; } html.nav-css-v24922 .checklist-complete-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } html.nav-css-v24922 .checklist-complete-actions button { min-height: 42px; padding: 10px 16px; border-radius: 12px; font-weight: 700; cursor: pointer; } html.nav-css-v24922 .checklist-complete-actions .secondary { background: transparent; color: var(--theme-text,#173f3d); border: 1px solid rgba(23,63,61,.22); } html.nav-css-v24922 .checklist-complete-actions .confirm { background: var(--theme-dark,#173f3d); color: #fffaf0; border: 1px solid var(--theme-dark,#173f3d); } html.nav-css-v24922 .checklist-complete-actions .secondary:hover { background: rgba(23,63,61,.06); } html.nav-css-v24922 .checklist-complete-actions .confirm:hover { filter: brightness(.95); } @media (max-width:520px) { html.nav-css-v24922 .checklist-tile-actions { gap: 4px; } html.nav-css-v24922 .checklist-open-button { flex: 1; } html.nav-css-v24922 .checklist-complete-actions { display: grid; grid-template-columns: 1fr 1fr; } html.nav-css-v24922 .checklist-complete-actions button { width: 100%; } } /* ============================================================ 08 · AJUSTEMENTS 24.9.23 Source 24.9.23 : assets/v24923.css ============================================================ */ /* NAV 24.9.23 */ html.nav-css-v24923 .controls #weatherRainBtn.active, html.nav-css-v24923 .controls #weatherRainBtn[aria-pressed="true"] { background: var(--theme-accent,#de7d55) !important; color: #fffaf0 !important; box-shadow: 0 0 0 3px rgba(222,125,85,.24) !important; } html.nav-css-v24923 .drawer-handle.is-open { opacity: 1 !important; pointer-events: auto !important; right:350px; border:none; box-shadow:none; } html.nav-css-v24923 .checklist-editor input, html.nav-css-v24923 .checklist-editor select { min-height: 46px; border: 1px solid rgba(23,63,61,.18); border-radius: 12px; background: var(--theme-panel,#fffaf0); color: var(--theme-text,#173f3d); padding: 10px 12px; font: inherit; } html.nav-css-v24923 .checklist-form-grid { gap: 14px; } html.nav-css-v24923 .checklist-edit-row { border-radius: 14px; } html.nav-css-v24923 .checklist-icon-button { border-radius: 12px; } html.nav-css-v24923 .add-check-row { min-height: 44px; border-radius: 12px; } html.nav-css-v24923 #deleteChecklistDialog .danger { background: #a92f2a; color: #fff; border: 1px solid #a92f2a; } /* ============================================================ 09 · COMPOSANTS COMMUNS 24.9.24 ============================================================ */ .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 24px; } .page-heading__copy { min-width: 0; } .page-heading h1 { margin: 0 0 6px; font-size: clamp(2.1rem, 6vw, 3.7rem); line-height: 1.05; } .page-heading p { max-width: 760px; margin: 0; color: var(--muted, #6d7f78); line-height: 1.5; } .page-heading__aside { flex: 0 0 auto; } /* Le nom du navigateur conserve la hiérarchie visuelle historique du profil. */ html.nav-css-portal .hero-profile h2 { margin: 4px 0 6px; font-size: clamp(30px, 5vw, 56px); line-height: 1; } /* Modale de déconnexion : masquée nativement avant même le chargement JS/CSS. */ .nav-modal[hidden] { display: none !important; } .nav-modal { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(13, 53, 50, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .nav-modal__card { width: min(390px, 100%); padding: 25px; border: 2px solid rgba(255, 255, 255, 0.65); border-radius: 26px; background: var(--theme-panel, #fffaf0); color: var(--theme-text, #173f3d); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.30); text-align: center; } .nav-modal__icon { font-size: 42px; color: var(--theme-dark, #173f3d); } .nav-modal__card h2 { margin: 8px 0; } .nav-modal__card p { margin: 0; color: #4d6963; line-height: 1.5; } .nav-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* Annuler */ .nav-modal__actions [data-nav-logout-cancel] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--theme-control, #f4d7a1); color: var(--theme-text, #173f3d); font: inherit; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; } .nav-modal__actions [data-nav-logout-cancel]:hover { filter: brightness(0.97); } /* Se déconnecter */ .nav-modal__actions .danger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #a92f2a; border-radius: 12px; background: #a92f2a; color: #fff; font-weight: 700; text-decoration: none; } .icon-nav .nav-logout-trigger { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: #8da0ad; cursor: pointer; transition: 0.16s ease; } .icon-nav .nav-logout-trigger:hover, .icon-nav .nav-logout-trigger:focus-visible { background: color-mix(in srgb, var(--nav-control) 64%, transparent); color: var(--nav-ink); outline: none; } html.nav-css-navigation .top-actions .nav-logout-trigger { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; margin: 0; overflow: hidden; border: 0; border-radius: 11px; background: transparent; color: #70847f; cursor: pointer; } @media (max-width: 720px) { .icon-nav .nav-logout-trigger { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; } } @media (max-width: 390px) { .icon-nav .nav-logout-trigger { width: 36px; height: 36px; flex-basis: 36px; } } @media (max-width: 720px) { html.nav-css-navigation .top-actions .nav-logout-trigger { flex-basis: 35px; width: 35px; height: 35px; } } @media (min-width: 1000px) { html.nav-css-navigation .top-actions .nav-logout-trigger { flex-basis: 42px; width: 42px; height: 42px; } } /* La modale de réinitialisation reste invisible même si une règle .hidden est indisponible. */ #resetTripModal[hidden] { display: none !important; } @media (max-width: 700px) { .page-heading { align-items: flex-start; flex-direction: column; } } /* ============================================================ CONTENU STANDARD DES PAGES ============================================================ */ .page-main { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0 70px; } @media (max-width: 700px) { .page-main { width: calc(100% - 24px); padding: 24px 0 54px; } } @media (min-width: 1800px) { .page-main { width: min(1440px, calc(100% - 80px)); } } /* ============================================================ LAYOUT CANONIQUE DES PAGES STANDARD ============================================================ */ html.nav-css-shell .page-main, html.nav-css-portal .page-main { width: min(1120px, calc(100% - 28px)) !important; margin: 0 auto !important; padding: 34px 0 70px !important; } @media (max-width: 700px) { html.nav-css-shell .page-main, html.nav-css-portal .page-main { width: calc(100% - 24px) !important; padding: 24px 0 54px !important; } } @media (min-width: 1800px) { html.nav-css-shell .page-main, html.nav-css-portal .page-main { width: min(1440px, calc(100% - 80px)) !important; } } /* ============================================================ PAGE HEADING — COMPOSANT CANONIQUE ============================================================ Même rendu sur : - Mes trajets - Mon bateau - Badges - Checklists - Mon compte - Administration Aucune ancienne règle Portal / V24 ne doit modifier la typographie de ce composant. ============================================================ */ .page-heading { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 20px !important; width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; } .page-heading__copy { min-width: 0 !important; } .page-heading h1 { margin: 0 0 8px !important; padding: 0 !important; color: var(--theme-text, #173f3d) !important; font-family: "DM Sans", system-ui, sans-serif !important; font-size: clamp(2.5rem, 5vw, 3rem) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .page-heading p { max-width: 760px !important; margin: 0 !important; padding: 0 !important; color: #5f7771 !important; font-family: "DM Sans", system-ui, sans-serif !important; font-size: 1.15rem !important; font-weight: 400 !important; line-height: 1.5 !important; } .page-heading__aside { flex: 0 0 auto !important; } /* Neutralise explicitement les anciens styles du portail */ html.nav-css-portal .page-heading h1, html.nav-css-shell .page-heading h1, html.nav-css-v24 .page-heading h1, html.nav-css-v24921 .page-heading h1, html.nav-css-v24922 .page-heading h1, html.nav-css-v24923 .page-heading h1 { margin: 0 0 8px !important; color: var(--theme-text, #173f3d) !important; font-size: clamp(2.5rem, 5vw, 3rem) !important; font-weight: 700 !important; line-height: 1.05 !important; } html.nav-css-portal .page-heading p, html.nav-css-shell .page-heading p, html.nav-css-v24 .page-heading p, html.nav-css-v24921 .page-heading p, html.nav-css-v24922 .page-heading p, html.nav-css-v24923 .page-heading p { margin: 0 !important; color: #5f7771 !important; font-size: 1.15rem !important; font-weight: 400 !important; line-height: 1.5 !important; } /* Mobile */ @media (max-width: 700px) { .page-heading { align-items: flex-start !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 22px !important; } .page-heading h1, html.nav-css-portal .page-heading h1, html.nav-css-shell .page-heading h1, html.nav-css-v24 .page-heading h1 { font-size: 2.5rem !important; } .page-heading p, html.nav-css-portal .page-heading p, html.nav-css-shell .page-heading p, html.nav-css-v24 .page-heading p { font-size: 1.1rem !important; } }