/* ================================================================================================ CHARTE « PASTEL CRAYON » — INTERFACE SEULEMENT (2026-08-23 soir, décision Simon « applique la charte SAUF en jeu : pas la minimap, pas les bateaux, et pas les minerais/îles »). ------------------------------------------------------------------------------------------------ PÉRIMÈTRE (élargi au lot 3 du même soir) : menus, panneaux, chips et HUD DOM + cadre de la minimap + notifications + HUD mobile. Côté CANVAS, seuls la MER (CFG.BIOME, en mélange ~35 % pastel) et le FOND de la minimap (UI.drawMinimap) ont bougé — les ÎLES, MINERAIS et NAVIRES gardent leur rendu d'avant (« le pastel recule toujours devant le gameplay »). Chargée EN DERNIER dans : retirer cette ligne = retour intégral à l'ancienne interface. Palette de référence (cf. artifact « Le Grand Carénage ») : papier #FAF6EE · encre #2B3A55 · corail #F4A09A · ciel #A8D8E8 · menthe #B8E0C8 · beurre #F6DFA0 · lavande #CBBFE8. ============================================================================================== */ :root { --pc-papier: #faf6ee; --pc-papier-2: #f3ecdd; --pc-carte: #fffdf7; --pc-kraft: #efe4cc; --pc-encre: #2b3a55; --pc-encre-douce: #54627e; --pc-encre-pale: #8b95aa; --pc-corail: #f4a09a; --pc-corail-fort: #e5726a; --pc-ciel: #a8d8e8; --pc-ciel-pale: #d8ecf4; --pc-menthe: #b8e0c8; --pc-menthe-pale: #e0f2e8; --pc-beurre: #f6dfa0; --pc-beurre-pale: #fbf0d2; --pc-lavande: #cbbfe8; --pc-rose-pale: #f8ddd9; --pc-ombre: 3px 3px 0 rgba(43, 58, 85, 0.16); /* —— retokenisation GLASS-UI : les panneaux « verre marine » deviennent du papier encré —— */ --g-hi: rgba(255, 255, 255, 0.65); --g-edge: rgba(43, 58, 85, 0.30); --g-edge-strong: rgba(43, 58, 85, 0.55); --g-accent: 229, 114, 106; /* corail (halos / focus / hover) */ --g-gold: #d9a13c; /* or encré (lisible sur papier) */ --g-gold-soft: 217, 161, 60; --g-danger: #cf6b5f; --g-teal: #5aa87c; --g-text: #2b3a55; --g-text-soft: #54627e; --g-muted: #8b95aa; --g-panel-bg: linear-gradient(180deg, #fffdf7, #f4ede0); --g-card-bg: linear-gradient(180deg, #fffdf7, #f8f2e6); --g-card-bg-2: linear-gradient(180deg, #fbf6ea, #f3ecdd); --g-field-bg: #ffffff; } /* ============ MENU PRINCIPAL — le carnet de bord sur le lagon ============ */ /* la GRANDE carte (skin actif « sunset-arcade » violet/or → papier encré ; même spécificité, chargé après = gagne) */ #menu #menu-main { background: linear-gradient(180deg, var(--pc-carte) 0%, #f6efe0 100%) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 22px !important; box-shadow: 6px 6px 0 rgba(43, 58, 85, 0.20) !important; color: var(--pc-encre) !important; } #menu #menu-main p, #menu #menu-main span, #menu #menu-main small, #menu #menu-main label, #menu #menu-main h1, #menu #menu-main h2 { color: var(--pc-encre); } #menu #menu-main .menu-teaser { background: var(--pc-beurre-pale) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 11px !important; text-shadow: none !important; } #menu #menu-main .menu-howto-step { background: var(--pc-ciel-pale) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; } #menu #btn-altmodes { color: var(--pc-encre-douce) !important; } /* les boutons du rideau « Autres modes » (Maze, Dev) gardent leur fond sombre inline : texte clair */ #menu #menu-main #btn-maze, #menu #menu-main #btn-maze span { color: #eef4ff !important; } #menu #menu-main #btn-maze .br-soon { color: #12233a !important; } #menu #menu-main #btn-dev-mode, #menu #menu-main #btn-dev-mode span { color: #eaffee !important; } #menu #menu-main #btn-dev-mode .br-soon { color: #12233a !important; } #menu #mobile-promo, #menu .mobile-promo { background: var(--pc-papier-2) !important; color: var(--pc-encre) !important; border: 2px dashed var(--pc-encre-douce) !important; border-radius: 12px !important; } #menu #mobile-promo .mp-txt, #menu .mobile-promo .mp-txt, #menu .mobile-promo b { color: var(--pc-encre) !important; } #menu #server-select, #menu .server-select { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 999px !important; box-shadow: var(--pc-ombre) !important; } #menu .server-select select, #menu .server-select b, #menu .server-select span { color: var(--pc-encre) !important; } .menu-legal-footer, .menu-legal-footer .legal-link { color: var(--pc-encre-douce) !important; } #menu #team-card { background: linear-gradient(180deg, var(--pc-carte), #f7f1e3) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 20px !important; box-shadow: 5px 5px 0 rgba(43, 58, 85, 0.18) !important; color: var(--pc-encre); } #menu #team-card h1, #menu #team-card h2, #menu #team-card h3, #menu #team-card label, #menu #team-card p { color: var(--pc-encre); } #menu #team-card small, #menu .hint, #menu .menu-note { color: var(--pc-encre-douce); } /* champs : blanc bordé d'encre */ #menu .pseudo-input, #menu input[type="text"], #menu select { background: #ffffff !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 12px !important; box-shadow: none !important; } #menu .pseudo-input::placeholder { color: var(--pc-encre-pale) !important; } /* PRENDRE LA MER : le corail bordé d'encre (fini l'orange fluo pulsant du skin sunset) */ #menu #btn-play, #menu .play-row #btn-play { background: linear-gradient(180deg, var(--pc-corail), #f0938c) !important; color: #3a2430 !important; border: 3px solid var(--pc-encre) !important; border-radius: 16px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important; box-shadow: 4px 4px 0 rgba(43, 58, 85, 0.22) !important; animation: none !important; } #menu #btn-play:hover { filter: brightness(1.04); transform: translateY(-2px); } /* boutons de coin : papier teinté par rôle (compte = menthe, boutique = beurre, achats = lavande). Spécificité calée sur le skin sunset (#menu-corner .menu-corner-btn.xxx:not(...)). */ .menu-corner-btn, #menu-corner .menu-corner-btn, #menu-topbar .menu-corner-btn { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 13px !important; box-shadow: var(--pc-ombre) !important; text-shadow: none !important; } .menu-corner-btn:hover { border-color: var(--pc-encre) !important; transform: translateY(-2px); } #menu-corner .menu-corner-btn.btn-login:not(.is-connected), #menu-topbar .menu-corner-btn.btn-login:not(.is-connected), .menu-corner-btn.btn-login { background: var(--pc-menthe) !important; color: var(--pc-encre) !important; } #menu-corner .menu-corner-btn.btn-shop, #menu-topbar .menu-corner-btn.btn-shop, #btn-shop, .menu-corner-btn.btn-shop { background: var(--pc-beurre) !important; color: var(--pc-encre) !important; } #menu-corner .menu-corner-btn.btn-shop .btn-shop-txt { color: var(--pc-encre) !important; } #menu-corner .menu-corner-btn.btn-inventory, #menu-topbar .menu-corner-btn.btn-inventory, #btn-inventory, .menu-corner-btn.btn-inventory { background: var(--pc-lavande) !important; color: var(--pc-encre) !important; } /* champs internes de la carte équipe + chip serveur (le skin sunset les peint en violet nuit : sélecteurs calqués sur les siens — #pseudo-edit, .flag-open, .srv-toggle) */ #menu .pseudo-flag-row #pseudo-edit, #menu .flag-open, #menu .srv-toggle, #menu #team-card .pseudo-input, #menu #team-card input, #menu #team-card select, #menu #team-card button { background: #ffffff !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 10px !important; text-shadow: none !important; box-shadow: none !important; } #menu #name-input { color: var(--pc-encre) !important; } #menu #name-input::placeholder { color: var(--pc-encre-pale) !important; } #menu #flag-open-name { color: var(--pc-encre) !important; } #menu .flag-open-txt b, #menu .srv-lbl { color: var(--pc-encre-douce) !important; } #menu .srv-val { color: var(--pc-corail-fort) !important; } #menu .pseudo-flag-row #pseudo-edit:focus-within { border-color: var(--pc-corail-fort) !important; box-shadow: 0 0 0 3px rgba(229, 114, 106, 0.30) !important; } #menu #team-card small, #menu #team-card .team-sub { color: var(--pc-encre-pale) !important; } /* cartes latérales du menu (serveurs, actus…) */ #menu .menu-card, #menu-side .menu-card { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 16px !important; box-shadow: var(--pc-ombre) !important; color: var(--pc-encre) !important; } #menu .menu-card h3 { color: var(--pc-encre) !important; } /* ============ HUD EN MER — chips papier au-dessus d'un monde INTACT ============ */ /* Classement : carte papier, bandeau beurre, encre lisible. (La minimap, elle, n'est PAS touchée.) */ #leaderboard { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; border-top: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; box-shadow: var(--pc-ombre) !important; color: var(--pc-encre) !important; } #leaderboard > h3 { background: var(--pc-beurre) !important; color: var(--pc-encre) !important; border-bottom: 2.5px solid var(--pc-encre); font-style: normal !important; } #lb-list li { color: var(--pc-encre) !important; } #lb-list li .lb-score, #lb-list li b { color: var(--pc-encre) !important; } #leaderboard .me, #lb-list li.me { background: var(--pc-beurre-pale) !important; border-radius: 8px; color: var(--pc-encre) !important; } /* barre d'XP : piste papier, remplissage menthe, « bientôt » beurre */ #xpbar { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 999px !important; } #xpbar-fill { background: linear-gradient(90deg, #a5d8b9, var(--pc-menthe)) !important; box-shadow: none !important; } #xpbar-fill.near { background: linear-gradient(90deg, var(--pc-beurre), #fbe9b4) !important; box-shadow: 0 0 8px rgba(217, 161, 60, 0.55) !important; } #xpbar-label { color: var(--pc-encre) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important; } #xpbar-name { color: var(--pc-encre) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.35) !important; } /* cale : jauge papier + or encré */ #cargo-bar { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 999px !important; } #cargo-fill { background: linear-gradient(90deg, #e9c53a, var(--pc-beurre)) !important; } #cargo-label { color: var(--pc-encre) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important; } /* perles : chip papier */ #pearl-hud { background: var(--pc-carte) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } /* carte d'accueil / tuto en jeu (« ÉTAPE x/y », #onboard-tip) : kraft bordé d'encre */ #onboard-tip { background: var(--pc-kraft) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #onboard-tip, #onboard-tip * { color: var(--pc-encre) !important; } #onboard-tip b, #onboard-tip strong { color: var(--pc-encre) !important; } #onboard-tip button { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 10px !important; } /* tracker de quête + bulle d'aide : chips papier */ #quest-chip, #quest-bubble, #quest-toast { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 12px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } /* boutons ronds du HUD (menu ☰, son, options en jeu) : pastilles papier */ #btn-options, #btn-hud-menu, #btn-mute { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #hud-menu { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #hud-menu button, #hud-menu a { color: var(--pc-encre) !important; } /* ============ PANNEAUX GÉNÉRIQUES (overlay .panel : tuto, classe, options…) ============ */ .overlay.panel, .panel { color: var(--pc-encre); } /* le voile derrière les panneaux : encre très diluée plutôt que noir */ .overlay { background: rgba(43, 58, 85, 0.30); } /* ============ OPTIONS — déjà papier : on aligne les accents sur la charte ============ */ /* les boutons d'action des cartes utilisent les jetons --pg-cta-gold (abricot) : corail encré */ :root { --pg-cta-gold: var(--pc-corail); --pg-cta-gold-ink: #3a2430; } #options-panel .opt-card .btn-secondary, #options-panel .opt-card .opt-btn { background: var(--pc-corail) !important; color: #3a2430 !important; border: 2px solid var(--pc-encre) !important; } #options-panel .opt-card .btn-secondary:hover, #options-panel .opt-card .opt-btn:hover { background: var(--pc-corail-fort) !important; color: #fff7f3 !important; } #options-panel input[type="range"] { accent-color: var(--pc-corail-fort); } #options-panel input[type="checkbox"] { accent-color: #5aa87c; } /* ============ ROUE DES NAVIRES [Y] — papier déjà en place, liseré d'encre unifié ============ */ #gallery-box { border: 2.5px solid var(--pc-encre) !important; border-radius: 18px !important; box-shadow: 6px 6px 0 rgba(43, 58, 85, 0.16) !important; } /* ================================================================================================ LOT 3 (2026-08-23 soir, « applique aussi : popup comment jouer, boutique, écran de mort — et en jeu la mer, la minimap, les notifications, le nom, la cadence, les boutons mobiles »). Règle réaffirmée par Simon : MÉLANGE de l'actuel et du pastel — jamais de blanc délavé. (La mer et le fond de la minimap sont côté canvas : CFG.BIOME + UI.drawMinimap, pas ici.) ============================================================================================== */ /* ---- minimap : cadre papier encré (le CONTENU reste peint par le canvas) ---- */ #minimap { border: 2.5px solid var(--pc-encre) !important; border-radius: 12px !important; box-shadow: var(--pc-ombre) !important; } /* ---- chips de pilotage : cadence (PC), turbo, capacité ---- */ #tap-chip { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; box-shadow: var(--pc-ombre) !important; } #tap-chip.low { color: var(--pc-corail-fort) !important; border-color: var(--pc-corail-fort) !important; } #dash-chip, #power-chip { background: rgba(250, 246, 238, 0.92) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; text-shadow: none !important; } /* ---- notifications : killfeed + statut multi (papier translucide, pas de blanc pur) ---- */ #killfeed .feed-msg { background: rgba(250, 246, 238, 0.86) !important; color: var(--pc-encre) !important; border-left: 3px solid var(--pc-corail-fort) !important; border-radius: 8px !important; font-weight: 700; } #mp-status { color: var(--pc-encre) !important; } /* ---- JETONS DE POPUPS --pg-* : redéfinis AU MÊME NIVEAU que la peau sunset (elle les pose sur les panneaux, pas sur :root — un :root chargé après PERD quand même). Tout l'intérieur des popups (cartes du tuto, onglets, quêtes, login, légal…) bascule en papier d'un coup. ---- */ #options-panel, #tutorial-panel, #login-panel, #quests-panel, #feedback-panel, #legal-panel, #stuff-panel, .chest-modal-backdrop, #premium-panel { --pg-paper: #fffdf7; --pg-card: #f8f2e6; --pg-field: #ffffff; --pg-card-bg: linear-gradient(180deg, #fffdf7, #f3ecdd); --pg-border: rgba(43, 58, 85, 0.35); --pg-border-strong: rgba(43, 58, 85, 0.60); --pg-ink: #2b3a55; --pg-ink-soft: #54627e; --pg-muted: #8b95aa; --pg-gold-deep: #d9a13c; --pg-gold: #e9c53a; --pg-sage-deep: #5aa87c; --pg-sage: #7cc39a; --pg-danger: #cf6b5f; --pg-veil: radial-gradient(120% 90% at 50% 0%, rgba(43, 58, 85, 0.28), rgba(43, 58, 85, 0.42) 70%); --pg-cta-gold: var(--pc-corail); --pg-cta-gold-ink: #3a2430; } /* jetons de l'ÉCRAN DE MORT (--dth-*, même principe) */ #death-screen { --dth-surface: rgba(255, 253, 247, 0.97); --dth-surface-2: rgba(43, 58, 85, 0.06); --dth-border: rgba(43, 58, 85, 0.55); --dth-text: #2b3a55; --dth-muted: #54627e; --dth-gold: #d9a13c; --dth-danger: #cf6b5f; --dth-accent: #5aa87c; } /* ---- POPUP « COMMENT JOUER » (#tutorial-panel) ---- */ #tutorial-box { background: linear-gradient(180deg, var(--pc-carte), #f4ede0) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 18px !important; box-shadow: 6px 6px 0 rgba(43, 58, 85, 0.18) !important; color: var(--pc-encre) !important; } #tutorial-box h1, #tutorial-box h2, #tutorial-box h3, #tutorial-box p, #tutorial-box li, #tutorial-box b, #tutorial-box span, #tutorial-box td, #tutorial-box th { color: var(--pc-encre); } #tutorial-box small, #tutorial-box .hint { color: var(--pc-encre-douce); } #tutorial-panel .tuto-tab { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; text-shadow: none !important; } #tutorial-panel .tuto-tab.selected { background: var(--pc-corail) !important; color: #3a2430 !important; border-color: var(--pc-encre) !important; } /* ---- BOUTIQUE (panneau perles #premium-panel + barre d'escale #shop-bar) ---- */ #premium-box { background: linear-gradient(180deg, var(--pc-carte), #f4ede0) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 18px !important; box-shadow: 6px 6px 0 rgba(43, 58, 85, 0.18) !important; color: var(--pc-encre) !important; } #premium-box h1, #premium-box h2, #premium-box h3, #premium-box p, #premium-box b, #premium-box span, #premium-box li { color: var(--pc-encre); } #premium-box small { color: var(--pc-encre-douce); } #premium-head { border-bottom: 2px solid var(--pc-encre) !important; } #premium-box button { border: 2px solid var(--pc-encre) !important; border-radius: 11px !important; color: var(--pc-encre); } #shop-reserve { background: var(--pc-beurre-pale) !important; border: 2px solid var(--pc-encre) !important; border-radius: 11px !important; color: var(--pc-encre) !important; } #shop-bar { background: rgba(250, 246, 238, 0.94) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #shop-bar .sy-label { color: var(--pc-encre) !important; } /* ---- ÉCRAN DE MORT (#death-screen) : le constat sur papier, sans délavage ---- */ #death-screen { background: rgba(43, 58, 85, 0.42) !important; } #death-box { background: linear-gradient(180deg, var(--pc-carte), #f2eadb) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 20px !important; box-shadow: 7px 7px 0 rgba(43, 58, 85, 0.22) !important; color: var(--pc-encre) !important; } #death-box h1, #death-box h2, #death-box h3, #death-box p, #death-box b, #death-box span, #death-box li, #death-box td { color: var(--pc-encre); } #death-box small { color: var(--pc-encre-douce); } #death-stats { color: var(--pc-encre-douce) !important; } #death-box .death-statgrid > * { background: var(--pc-papier-2) !important; border: 2px solid var(--pc-encre) !important; border-radius: 11px !important; } #death-box button { border: 2.5px solid var(--pc-encre) !important; border-radius: 13px !important; } #death-box button.primary, #death-box #death-respawn, #death-box .btn-respawn { background: linear-gradient(180deg, var(--pc-corail), #f0938c) !important; color: #3a2430 !important; } /* ---- HUD MOBILE : sticks + boutons tactiles en papier encré translucide ---- */ .tc-btn, #tc-ability, #tc-context { background: rgba(250, 246, 238, 0.88) !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; text-shadow: none !important; } .tc-btn.tc-on, #tc-ability.tc-on { background: var(--pc-menthe) !important; } .tc-stick .tc-base { background: rgba(250, 246, 238, 0.30) !important; border: 2.5px solid rgba(43, 58, 85, 0.65) !important; } .tc-stick .tc-knob { background: rgba(250, 246, 238, 0.92) !important; border: 2.5px solid var(--pc-encre) !important; } .tc-guide-lbl, .tc-edit-lbl { color: var(--pc-encre) !important; text-shadow: 0 1px 0 rgba(255,255,255,.5) !important; } #mob-aids-dock .mob-aid-btn { background: rgba(250, 246, 238, 0.90) !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; } #mob-aids-dock .mob-aid-btn.aid-on { background: var(--pc-menthe) !important; } .mob-aid-status { background: rgba(250, 246, 238, 0.92) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; } .mob-aid-status.status-flee { background: var(--pc-corail) !important; color: #3a2430 !important; } #mob-settings-coach { background: var(--pc-kraft) !important; border: 2.5px solid var(--pc-encre) !important; color: var(--pc-encre) !important; } #mob-settings-coach .msc-text { color: var(--pc-encre-douce) !important; } /* têtes de colonnes de l'écran de mort (« Bilan de la partie », « Rejouer ») : encre douce lisible */ #death-box .death-col-head { color: var(--pc-encre-douce) !important; border-bottom: 2px solid rgba(43, 58, 85, 0.35) !important; } /* ---- GRANDE CARTE + PARTAGE DE POSITION (#minimap-modal — demande Simon lot 3 bis) ---- */ #minimap-big-wrap { background: linear-gradient(180deg, var(--pc-carte), #f3ecdd) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 18px !important; box-shadow: 6px 6px 0 rgba(43, 58, 85, 0.18) !important; color: var(--pc-encre) !important; } #minimap-big-wrap h1, #minimap-big-wrap h2, #minimap-big-wrap h3, #minimap-big-wrap p, #minimap-big-wrap li, #minimap-big-wrap b, #minimap-big-wrap span, #minimap-big-wrap label { color: var(--pc-encre); } #minimap-big-wrap small { color: var(--pc-encre-douce); } #minimap-big { border: 2.5px solid var(--pc-encre) !important; border-radius: 12px !important; } #mm-tabs .mm-tab { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; text-shadow: none !important; } #mm-tabs .mm-tab.selected { background: var(--pc-corail) !important; color: #3a2430 !important; } #mm-tab-badge { background: var(--pc-corail-fort) !important; color: #fff7f3 !important; border-radius: 999px; } .minimap-legend li { color: var(--pc-encre) !important; } /* onglet GPS : lignes de joueurs + demandes de partage en cartes papier, accepter = menthe, refuser = corail */ #mm-tab-gps .gps-row, #mm-tab-gps li, #mm-tab-gps .gps-req { background: var(--pc-papier-2) !important; border: 2px solid var(--pc-encre) !important; border-radius: 11px !important; color: var(--pc-encre) !important; } #mm-tab-gps button { background: var(--pc-carte) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 10px !important; } #mm-tab-gps button.ok, #mm-tab-gps button[data-accept], #mm-tab-gps .gps-accept { background: var(--pc-menthe) !important; } #mm-tab-gps button.no, #mm-tab-gps button[data-refuse], #mm-tab-gps .gps-refuse { background: var(--pc-corail) !important; color: #3a2430 !important; } /* ---- POPUPS D'ESCALE : AMIRAUTÉ / BUNKER (barre #shop-bar + cartes .shop-card / .shop-item) ---- */ .shop-card { background: linear-gradient(180deg, var(--pc-carte), #f6efe0) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; text-shadow: none !important; } .shop-card b, .shop-card span, .shop-card small, .shop-card p { color: var(--pc-encre); } .shop-card small { color: var(--pc-encre-douce) !important; } .shop-card.is-starter { border-color: var(--pc-corail-fort) !important; } .shop-item { background: var(--pc-carte) !important; border: 2px solid var(--pc-encre) !important; border-radius: 12px !important; color: var(--pc-encre) !important; } .shop-item b { color: var(--pc-encre) !important; } .shop-item small { color: var(--pc-encre-douce) !important; } .shop-item.is-selected { border-color: var(--pc-corail-fort) !important; box-shadow: 0 0 0 3px rgba(229, 114, 106, 0.30) !important; } .shop-item.locked { opacity: 0.6; } .shop-item-price { background: var(--pc-beurre-pale) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; color: var(--pc-encre) !important; } .shop-item-price.ok { background: var(--pc-beurre) !important; } /* ---- NOTIFICATIONS DE JEU (2026-08-23, « notif du jeu, Jony arrive, filon d'or… pas conformes ») Bandeau broadcast (#boss-banner : « Jony entre en scène », « filon d'or repéré »), alerte hélico/radio du Gardien et toast de quête : le dernier bloc du HUD resté en marine/or. ---- */ #boss-banner, #heli-notice { background: rgba(250, 246, 238, 0.94) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-left: 4px solid var(--pc-corail-fort) !important; border-radius: 11px !important; box-shadow: var(--pc-ombre) !important; font-style: normal !important; text-shadow: none !important; } #boss-banner::after { background: linear-gradient(90deg, var(--pc-beurre), var(--pc-menthe)) !important; } #quest-toast, #quest-bubble { background: rgba(250, 246, 238, 0.94) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; text-shadow: none !important; } /* pastille de boost actif + power-up : mêmes chips papier que le reste du HUD */ .boost-badge { background: rgba(250, 246, 238, 0.92) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; text-shadow: none !important; } /* compteur de kills et cale : papier encré (ils restaient en marine) */ #kills-hud { background: rgba(250, 246, 238, 0.92) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; text-shadow: none !important; } #cargo-wrap #cargo-label, #coins { color: var(--pc-encre) !important; } #coins { background: rgba(250, 246, 238, 0.92) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; text-shadow: none !important; } /* pastille de perles, désormais en haut à gauche (cf. style.css) */ #pearl-hud { background: rgba(250, 246, 238, 0.92) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; text-shadow: none !important; box-shadow: var(--pc-ombre) !important; } /* ================================================================================================ ROUE DES NAVIRES [Y] — PLUS DE POPUP, JUSTE UN FLOU (2026-08-23 : « trop de texte, trop gros ; retire la popup, je veux à la place un flou léger de tout l'arrière-plan »). Le cadre « papier quadrillé » disparaît : la roue flotte sur le jeu, dépoli. Deux couches volontaires — `backdrop-filter` (vrai flou) ET un voile papier translucide qui garantit la lisibilité là où le flou n'existe pas (vieux navigateurs, rendu headless). ============================================================================================== */ #gallery-panel { background-color: rgba(250, 246, 238, 0.55) !important; backdrop-filter: blur(5px) saturate(0.92); -webkit-backdrop-filter: blur(5px) saturate(0.92); } #gallery-box { background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; padding-top: 8px !important; } /* MOINS DE TEXTE : les trois phrases d'explication sautent. Le titre, la légende de couleurs et le compteur de découvertes suffisent — la roue s'explique en la survolant. */ #gallery-box .gallery-lead, #gallery-box .gallery-foot, #gallery-box .gc-hint { display: none !important; } #gallery-box h2 { font-size: 17px !important; letter-spacing: 2px !important; color: var(--pc-encre) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } #gallery-legend { font-size: 10.5px !important; color: var(--pc-encre-douce) !important; } #gallery-legend span { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } /* compteur de découvertes : chip papier compact (il flotte désormais sur le flou) */ #gallery-codex { background: rgba(255, 253, 247, 0.92) !important; border: 2px solid var(--pc-encre) !important; border-radius: 999px !important; color: var(--pc-encre) !important; padding: 4px 14px !important; box-shadow: var(--pc-ombre) !important; } /* ---- BLOCS DE JEU RESTÉS EN MARINE (audit 2026-08-23, « trouve d'autres incohérences ») : panneau Améliorations (bas-gauche), carte de coque (bas-droite) et barre d'armement (gauche). Ce sont les trois derniers cadres opaques du HUD ; ils encadraient la mer pastel en bleu nuit. ---- */ #stats-panel, #fleet-panel { background: rgba(250, 246, 238, 0.92) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #stats-panel h3, #fleet-panel h3 { color: var(--pc-encre-douce) !important; } #stats-panel h3 span, #fleet-panel h3 span { color: var(--pc-encre) !important; } #stats-panel button, #stats-panel .stat-row { color: var(--pc-encre) !important; text-shadow: none !important; } #hull-card { background: rgba(250, 246, 238, 0.94) !important; border: 2.5px solid var(--pc-encre) !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #hull-card b, #hull-card span, #hull-card small { color: var(--pc-encre) !important; } #hull-card small, #hull-card .hc-sub { color: var(--pc-encre-douce) !important; } .arm-slot { background: rgba(250, 246, 238, 0.88) !important; border: 2px solid var(--pc-encre) !important; color: var(--pc-encre) !important; } .arm-slot .arm-lbl, .arm-slot .arm-n { color: var(--pc-encre) !important; text-shadow: none !important; } #arm-tip { background: rgba(250, 246, 238, 0.94) !important; border: 2px solid var(--pc-encre) !important; color: var(--pc-encre) !important; border-radius: 10px !important; } /* bandeau RGPD + invite son : les deux derniers bandeaux violets du démarrage */ #privacy-notice, #sound-prompt { background: rgba(250, 246, 238, 0.96) !important; color: var(--pc-encre) !important; border: 2.5px solid var(--pc-encre) !important; border-radius: 14px !important; box-shadow: var(--pc-ombre) !important; } #privacy-notice *, #sound-prompt * { color: var(--pc-encre) !important; text-shadow: none !important; } #privacy-notice button, #sound-prompt button { background: var(--pc-menthe) !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 10px !important; } #privacy-notice a { color: var(--pc-corail-fort) !important; } /* ================================================================================================ LOT 6 (2026-08-23) — deux retours de Simon. ============================================================================================== */ /* ---- CLASSEMENT : « je ne veux pas de background mais un flou d'arrière-plan léger » ---- Le panneau devient une VITRE : la mer reste visible dessous, juste dépolie. Un voile papier très faible (0.14) tient la lisibilité là où le navigateur ne floute pas, et chaque ligne porte un halo blanc — sans lui, du texte encre sur mer claire perd ses contours. ---- */ #leaderboard { background: rgba(250, 246, 238, 0.14) !important; backdrop-filter: blur(7px) saturate(0.95); -webkit-backdrop-filter: blur(7px) saturate(0.95); border: 2px solid rgba(43, 58, 85, 0.55) !important; box-shadow: none !important; } #leaderboard > h3 { background: rgba(246, 223, 160, 0.55) !important; border-bottom: 2px solid rgba(43, 58, 85, 0.45) !important; } #leaderboard > h3, #lb-list li, #lb-list li b, #lb-list li .lb-score, #lb-count { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 4px rgba(255, 255, 255, 0.55) !important; } #leaderboard .me, #lb-list li.me { background: rgba(246, 223, 160, 0.42) !important; border: 2px dashed rgba(43, 58, 85, 0.5); } /* ---- ROUE [Y] : « tout est trop gros, ça m'oblige à scroller — que tout tienne dans l'écran » ---- Le panneau ne défile PLUS : il occupe la fenêtre et c'est la roue qui se met à l'échelle pour rentrer (cf. fitTreeStage, plancher abaissé). Le pied « Y pour fermer » étant masqué par la charte, on récupère aussi sa réserve de hauteur. ---- */ #gallery-box { max-height: 100vh !important; height: 100vh; overflow: hidden !important; justify-content: flex-start; gap: 6px !important; padding-bottom: 4px !important; } @media (min-width: 1060px) { /* la fenêtre de pan ne borne plus rien sur grand écran : plus de barre de défilement interne */ .vtree-wrap { overflow: hidden !important; max-height: none !important; } } /* en-tête compacté : chaque pixel gagné en haut est un pixel de roue en plus */ #gallery-box h2 { font-size: 15.5px !important; margin-bottom: 0 !important; } #gallery-legend { margin: 0 !important; } #gallery-codex { padding: 3px 12px !important; font-size: 12.5px !important; } /* ---- POPUP « UNE IDÉE ? UN BUG ? » (#feedback-panel) et CROIX DE FERMETURE de TOUTES les popups (2026-08-23, retours Simon). Le formulaire d'idée gardait ses jetons `--pg-sheet` propres (hors du jeu de jetons retokenisé plus haut), et la croix `.panel-x` venait de glass-ui : verre marine sur fond papier — la seule pièce d'interface restée « d'avant » sur TOUS les panneaux. ---- */ #options-panel, #tutorial-panel, #login-panel, #quests-panel, #feedback-panel, #legal-panel, #stuff-panel, .chest-modal-backdrop, #premium-panel { --pg-sheet: linear-gradient(180deg, #fffdf7, #f4ede0); --pg-shadow-sheet: 6px 6px 0 rgba(43, 58, 85, 0.18); } #feedback-box { border: 2.5px solid var(--pc-encre) !important; border-radius: 18px !important; color: var(--pc-encre) !important; } #feedback-box h2, #feedback-box .fb-lead, #feedback-box .fb-field-lbl, #feedback-box .fb-type-lbl, #feedback-box .fb-note, #feedback-box .fb-count { color: var(--pc-encre) !important; } #feedback-box .fb-lead b { color: var(--pc-corail-fort) !important; } #feedback-box .fb-lead, #feedback-box .fb-note, #feedback-box .fb-optional { color: var(--pc-encre-douce) !important; } #feedback-box .fb-chip { background: var(--pc-beurre-pale) !important; border: 2px dashed var(--pc-encre-douce) !important; color: var(--pc-encre) !important; } #feedback-box .fb-type { background: var(--pc-carte) !important; border: 2px solid var(--pc-encre) !important; border-radius: 12px !important; color: var(--pc-encre) !important; } #feedback-box .fb-type.selected { background: var(--pc-corail) !important; color: #3a2430 !important; border-color: var(--pc-encre) !important; } #feedback-box input, #feedback-box textarea, #feedback-box select { background: #ffffff !important; color: var(--pc-encre) !important; border: 2px solid var(--pc-encre) !important; border-radius: 10px !important; } #feedback-box input::placeholder, #feedback-box textarea::placeholder { color: var(--pc-encre-pale) !important; } #fb-actions button, #feedback-box .btn-secondary { border: 2.5px solid var(--pc-encre) !important; border-radius: 12px !important; color: var(--pc-encre) !important; } #fb-actions button.primary, #fb-actions button[type="submit"] { background: var(--pc-corail) !important; color: #3a2430 !important; } /* l'ampoule dorée du bandeau : elle reste dorée (c'est l'illustration), on encre juste son cerne */ #fb-bulb { filter: drop-shadow(0 2px 0 rgba(43, 58, 85, 0.25)); } /* LA CROIX — sur tous les panneaux (.panel-x) : pastille papier bordée d'encre, corail au survol */ .panel-x { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; font-weight: 800; } .panel-x:hover { background: var(--pc-corail) !important; border-color: var(--pc-encre) !important; color: #3a2430 !important; } #options-panel .panel-x { background: var(--pc-carte) !important; color: var(--pc-encre) !important; } /* ---- LÉGENDE DE COULEURS DU [Y] RETIRÉE (demande Simon) : les six pastilles expliquaient un code que la roue montre déjà par ses secteurs. Un bandeau de texte en moins, plus de place pour la roue. Le titre et le compteur de découvertes restent. ---- */ #gallery-legend { display: none !important; } /* la croix : les peaux précédentes la stylent PAR PANNEAU (#feedback-panel .panel-x, 0-2-0) — une règle `.panel-x` seule (0-1-0) perd même chargée après. On reprend leurs sélecteurs, un par un. */ #options-panel .panel-x, #tutorial-panel .panel-x, #login-panel .panel-x, #quests-panel .panel-x, #feedback-panel .panel-x, #legal-panel .panel-x, #stuff-panel .panel-x, #premium-panel .panel-x, #gallery-panel .panel-x, #minimap-modal .panel-x, #death-screen .panel-x, #death-screen #death-x { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; color: var(--pc-encre) !important; box-shadow: var(--pc-ombre) !important; } #options-panel .panel-x:hover, #tutorial-panel .panel-x:hover, #login-panel .panel-x:hover, #quests-panel .panel-x:hover, #feedback-panel .panel-x:hover, #legal-panel .panel-x:hover, #stuff-panel .panel-x:hover, #premium-panel .panel-x:hover, #gallery-panel .panel-x:hover, #minimap-modal .panel-x:hover, #death-screen .panel-x:hover, #death-screen #death-x:hover { background: var(--pc-corail) !important; color: #3a2430 !important; border-color: var(--pc-encre) !important; } /* boutons secondaires des popups (« Envoyer à l'équipage », « Fermer », « Relancer le tuto »…) : la peau sunset les peint en prune EN DUR par panneau (0-2-0) — on reprend ses sélecteurs. Le bouton d'ACTION de chaque popup passe en corail, les autres en papier encré. */ #options-panel .btn-secondary, #tutorial-panel .btn-secondary, #quests-panel .btn-secondary, #feedback-panel .btn-secondary, #legal-panel .btn-secondary, #stuff-panel .btn-secondary, #premium-panel .btn-secondary, #death-screen .btn-secondary { background: var(--pc-carte) !important; border: 2.5px solid var(--pc-encre) !important; color: var(--pc-encre) !important; border-radius: 12px !important; text-shadow: none !important; } #feedback-panel #fb-send, #tutorial-panel #tuto-replay, #premium-panel .btn-buy { background: linear-gradient(180deg, var(--pc-corail), #f0938c) !important; color: #3a2430 !important; border-color: var(--pc-encre) !important; } #options-panel .btn-secondary:hover, #tutorial-panel .btn-secondary:hover, #quests-panel .btn-secondary:hover, #feedback-panel .btn-secondary:hover, #legal-panel .btn-secondary:hover, #stuff-panel .btn-secondary:hover { background: var(--pc-beurre-pale) !important; color: var(--pc-encre) !important; } /* ---- INTERRUPTEUR DE THÈME (Options → Affichage) : deux pastilles, l'active en corail ---- */ .opt-theme { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; flex-wrap: wrap; } .opt-theme-lbl { font-weight: 700; font-size: 13px; color: var(--pc-encre); } .opt-theme-btn { flex: 1 1 auto; padding: 7px 12px; font: 700 13px/1.2 system-ui, 'Segoe UI', sans-serif; background: var(--pc-carte); color: var(--pc-encre); border: 2px solid var(--pc-encre); border-radius: 999px; cursor: pointer; } .opt-theme-btn.is-on { background: var(--pc-corail); color: #3a2430; box-shadow: var(--pc-ombre); } .opt-theme-btn:hover { background: var(--pc-beurre-pale); } .opt-theme-btn.is-on:hover { background: var(--pc-corail); } /* notes explicatives des Options : relevées à 2,96:1 par la sonde de contraste (juste sous le seuil de 3). On passe de l'encre pâle à l'encre douce — même hiérarchie, contraste conforme. */ #options-panel .opt-note, #options-panel .opt-note b { color: var(--pc-encre-douce) !important; } #options-panel #opt-track-current { color: var(--pc-encre) !important; } /* pied des Options (« Options développeur », numéro de version) : 2,96:1 relevé — sous le seuil. */ #options-panel #dev-toggle, #options-panel #opt-version { color: var(--pc-encre-douce) !important; } /* ================================================================================================ ÉCRAN D'INSTALLATION PWA (#install-gate) + BANNIÈRE PROMO — PASSÉS EN PASTEL CRAYON (2026-08-23 soir, Simon : « refais aussi l'écran de chargement quand on lance le jeu ET la PWA ») C'est le tout premier écran d'un joueur mobile : il arrivait en dégradé rose/prune sur une carte bleu nuit, c'est-à-dire dans l'ancienne identité, avant même d'avoir vu la nouvelle. Le geste est le même que partout ailleurs : papier, encre marine épaisse, une seule couleur d'action (corail). ============================================================================================== */ #install-gate { background-color: var(--pc-papier) !important; background-image: linear-gradient(180deg, #faf6ee 0%, #f1eee3 40%, #dceef2 68%, #a8d8e8 100%) !important; } .ig-sun { background: radial-gradient(circle, rgba(246, 223, 160, 0.75) 0%, rgba(246, 223, 160, 0.4) 44%, rgba(246, 223, 160, 0) 74%) !important; } .ig-wave-1 { background: var(--pc-menthe) !important; opacity: 0.75 !important; } .ig-wave-2 { background: #97cddd !important; opacity: 0.8 !important; } /* La carte redevient une FICHE DE PAPIER cernée d'encre — le cerne remplace l'ombre portée, comme sur les coques : c'est le trait qui détache, pas la profondeur. */ .ig-card { background: var(--pc-papier) !important; border: 3px solid var(--pc-encre) !important; border-radius: 16px !important; box-shadow: 0 6px 0 rgba(43, 58, 85, 0.16) !important; color: var(--pc-encre) !important; } .ig-logo { color: var(--pc-encre) !important; text-shadow: none !important; } .ig-logo span { color: var(--pc-encre-douce) !important; } .ig-title { color: var(--pc-encre) !important; } .ig-sub { color: var(--pc-encre-douce) !important; } .ig-sub b { color: var(--pc-encre) !important; } .ig-perks { color: var(--pc-encre-douce) !important; } .ig-tick { background: var(--pc-menthe) !important; color: var(--pc-encre) !important; } .ig-installed { color: var(--pc-encre-douce) !important; } .ig-art { filter: none !important; } /* Bouton d'action : corail plein, ENCRE dessus (jamais du clair sur du clair — le défaut que Simon avait relevé sur les boutons de boutique) et le liseré bas gardé, c'est la signature du jeu. */ .ig-btn { color: var(--pc-encre) !important; background: var(--pc-corail) !important; border-bottom: 5px solid rgba(43, 58, 85, 0.55) !important; text-transform: none !important; letter-spacing: 0.6px !important; } .ig-btn--open { background: var(--pc-menthe) !important; border-bottom-color: rgba(43, 58, 85, 0.5) !important; } .ig-btn--ghost { background: transparent !important; color: var(--pc-encre) !important; border: 2px solid rgba(43, 58, 85, 0.45) !important; border-bottom: 2px solid rgba(43, 58, 85, 0.45) !important; } .ig-hint { color: var(--pc-encre) !important; background: var(--pc-beurre) !important; border: 2px solid rgba(43, 58, 85, 0.35) !important; } /* Bannière « aussi sur téléphone » (PC, dans le menu) : même traitement papier. */ .mobile-promo { background: var(--pc-papier) !important; border: 2px solid rgba(43, 58, 85, 0.35) !important; box-shadow: 0 4px 0 rgba(43, 58, 85, 0.12) !important; color: var(--pc-encre) !important; } .mobile-promo .mp-txt b { color: var(--pc-encre) !important; } .mobile-promo .mp-x { background: var(--pc-papier-2) !important; border: 2px solid rgba(43, 58, 85, 0.35) !important; color: var(--pc-encre) !important; }