) — s'aligne sur la Vue d'ensemble qui utilisait 1,1rem en inline. */ .col-center { font-size: 1.1rem; } /* Mobile : contenu un cran plus petit (le 1,1rem est calibré pour le desktop). */ @media (max-width: 700px) { .col-center { font-size: 1rem; } } /* Utilitaire : éléments réservés au mobile (sheet, barre de ressources, bottom nav). */ .mobile-only { display: none; } /* --- Barre de menu principale --- */ .topbar { display: flex; align-items: center; gap: 18px; padding: 12px 22px; background: rgba(6, 8, 11, .92); border-bottom: 2px solid var(--gold-dim); } .brand { color: var(--gold); font-size: 22px; font-weight: 700; text-decoration: none; letter-spacing: 2px; } .mainmenu { display: flex; gap: 4px; flex: 1; } .menu-item { background: none; border: none; color: var(--muted); font-size: 15px; text-decoration: none; display: flex; align-items: center; gap: 7px; padding: 6px 14px; cursor: pointer; border-bottom: 2px solid transparent; } .menu-item:hover { color: var(--parch); } .menu-item.active { color: var(--gold); border-bottom-color: var(--gold); } /* Menu verrouillé (dévoilement progressif) : grisé, non cliquable, avec cadenas. */ .menu-item.disabled { color: #5b626b; cursor: not-allowed; opacity: .55; } .menu-item.disabled:hover { color: #5b626b; } .topright { display: flex; align-items: center; gap: 14px; font-size: 14px; } .player { color: var(--gold); } /* Horloge synchronisée serveur : discrète, chiffres tabulaires ; le tic s'anime doucement sous 5 s. */ .server-clock { display: inline-flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .5px; cursor: default; } .sc-tick { color: var(--gold-dim); white-space: nowrap; transition: color .3s; } .sc-tick--soon { color: var(--gold); } .res-tick { color: var(--muted); } .btn-logout { background: none; border: 1px solid var(--gold-dim); color: var(--gold); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; } .btn-logout:hover { background: var(--gold); color: #15181c; } /* Raccourci messagerie (mobile uniquement) : enveloppe + badge total de non-lus. */ .mail-btn { display: none; position: relative; color: var(--parch); font-size: 20px; text-decoration: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--panel-border); border-radius: 8px; } .mail-badge { position: absolute; top: -7px; right: -7px; background: var(--gold); color: #15181c; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 5px; min-width: 18px; text-align: center; font-family: Arial, sans-serif; line-height: 1.3; } /* --- Bandeau de ressources (mobile uniquement, sticky, toujours visible) --- */ .resbar { display: none; } /* --- Sous-menus --- */ .submenubar { background: rgba(10, 13, 17, .82); border-bottom: 1px solid #2a3038; padding: 7px 22px; } .submenu { display: flex; gap: 6px; flex-wrap: wrap; } .subitem { background: none; border: 1px solid transparent; color: #aeb4bc; font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; cursor: pointer; } .subitem:hover { color: var(--parch); } .subitem.active { color: var(--parch); background: rgba(120, 95, 45, .18); border-color: #5a4a2a; } .subitem.disabled { color: #5b626b; cursor: not-allowed; opacity: .6; } .subitem.disabled:hover { color: #5b626b; } .flash { padding: 10px 22px 0; } /* --- Layout 3 colonnes --- */ .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 150px; gap: 18px; padding: 18px 22px; align-items: start; } /* --- Navigation basse (mobile uniquement) --- */ .bottomnav { display: none; } .panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; } /* --- Tableau de bord (colonne gauche) : pseudo centré + tableau à bordures + ligne d'actions --- */ .col-left .panel { padding: 14px; } .dash-portrait { display: block; width: 84px; height: 84px; margin: 2px auto 8px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-dim); box-shadow: 0 0 14px rgba(201, 168, 106, .25); } /* Cadrage haut : les avatars sont en pied, on montre la tête entière dans le médaillon. */ .dash-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; } .dash-portrait:hover { border-color: var(--gold); } .dash-title { color: var(--gold); font-size: 17px; margin: 0 0 10px; text-align: center; letter-spacing: 1px; } /* Une ressource = icône + valeur, avec jauge de remplissage sous les stocks plafonnés. */ .dash-res { padding: 6px 2px; border-bottom: 1px solid #232a32; } .dash-res:last-child { border-bottom: 0; } .dash-res > i { color: var(--gold-dim); font-size: 1.15rem; margin-right: 9px; vertical-align: -2px; } /* Icônes de ressources en emoji (cohérentes avec le reste du jeu : 🪵 🌾 💧 💎 👥 🗺️). */ .dash-ico { display: inline-block; width: 1.35rem; margin-right: 8px; font-size: 1.05rem; text-align: center; vertical-align: -1px; } .dash-res .v { color: var(--parch); font-size: 16px; font-weight: 500; } .dash-res .v.dash-full { color: #e05555; font-weight: 700; font-style: italic; } .dash-gauge { height: 5px; margin-top: 4px; background: #232a32; border-radius: 3px; overflow: hidden; } .dash-gauge-fill { height: 100%; background: linear-gradient(90deg, #4e7a41, #7bb35f); border-radius: 3px; } /* Alerte de stockage : orange dès 80 % de la capacité, rouge quand c'est plein. */ .dash-gauge-fill--warn { background: linear-gradient(90deg, #a86a2c, #d99a4e); } .dash-gauge-fill--full { background: linear-gradient(90deg, #8c3b3b, #c95555); } .dash-gauge-fill--mana { background: linear-gradient(90deg, #3a5168, #6f9ec9); } .dash-actions { display: flex; justify-content: space-around; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--panel-border); } .dash-actions a, .dash-actions .dash-quests { position: relative; display: inline-flex; padding: 4px 6px; color: var(--parch); font-size: 1.5rem; text-decoration: none; line-height: 1; } .dash-actions a:hover { color: var(--gold); } .dash-quests { opacity: .55; cursor: default; } .dash-badge { position: absolute; top: -6px; right: -8px; min-width: 18px; text-align: center; background: var(--gold); color: #15181c; border-radius: 10px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; padding: 1px 5px; line-height: 1.3; } .dash-badge--online { background: #5a8a4a; color: #eaf3e2; } .dash-badge--muted { background: #3a4049; color: var(--txt); } /* Page Amis : pastille de présence. */ .friend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #4a5058; margin-right: 8px; vertical-align: baseline; } .friend-dot--online { background: #6fbf5a; box-shadow: 0 0 6px rgba(111, 191, 90, .7); } /* --- Retheme des éléments Bootstrap utilisés dans les pages --- */ .text-warning { color: var(--gold) !important; } .text-secondary { color: var(--muted) !important; } .text-info { color: var(--steel) !important; } .text-light { color: var(--parch) !important; } .bg-warning { background-color: var(--gold) !important; } .bg-info { background-color: #3a5168 !important; } .badge.text-dark { color: #15181c !important; } .btn-outline-warning { color: var(--gold); border-color: var(--gold-dim); } .btn-outline-warning:hover { background-color: var(--gold); color: #15181c; border-color: var(--gold); } .btn-outline-danger { color: var(--red); border-color: #7a3a3a; } .btn-warning { background-color: var(--gold); border-color: var(--gold); color: #15181c; } .btn-warning:hover { background-color: #d9bd84; border-color: #d9bd84; color: #15181c; } /* Rouge/vert Bootstrap trop sombres sur fond nuit (AA 4,5:1) : variantes claires. */ .text-danger { color: #e78791 !important; } .text-success { color: #86c793 !important; } .btn-outline-danger:disabled, .btn-outline-danger.disabled { color: #e78791; } .btn:disabled, .btn.disabled { opacity: .8; } /* Badges d'état : le retheme assombrit bg-info, le texte doit donc être clair. */ .badge.bg-info.text-dark { color: var(--parch) !important; } .alert-success { background: rgba(80, 110, 70, .22); border-color: #5a7a4a; color: #cfe0c2; } .alert-danger { background: rgba(120, 50, 50, .22); border-color: #8c3b3b; color: #e6c2c2; } .form-control { background-color: #10141a !important; border-color: var(--panel-border) !important; color: var(--parch) !important; } .form-control:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 .2rem rgba(201, 168, 106, .15) !important; } /* On saisit les nombres à la main : pas de flèches haut/bas sur les champs numériques. */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } hr { border-color: var(--panel-border) !important; opacity: 1; } /* --- Page Souverain : « paper doll » — le personnage en pied, 4 slots d'armure à gauche, armes et bijoux à droite. --- */ .paperdoll { display: grid; grid-template-columns: 96px minmax(200px, 340px) 96px; gap: 14px; justify-content: center; align-items: stretch; } .paperdoll-col { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; } .paperdoll-center { display: flex; flex-direction: column; gap: 10px; } .paperdoll-name { text-align: center; font-size: 1.15rem; color: var(--gold); letter-spacing: .5px; } .paperdoll-vocation { text-align: center; font-size: .95rem; } .paperdoll-figure { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 12px; background: radial-gradient(ellipse at 50% 85%, rgba(201, 168, 106, .10), rgba(255, 255, 255, .03) 60%); overflow: hidden; } .paperdoll-figure .media-icon { position: absolute; font-size: 3.2rem; opacity: .8; } .paperdoll-figure img { position: relative; width: 100%; height: 100%; object-fit: cover; } .equip-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; border: 1px dashed var(--panel-border); border-radius: 8px; padding: 4px 3px; background: rgba(255, 255, 255, .03); } .equip-icon { font-size: 1rem; filter: grayscale(.5); opacity: .8; } .equip-label { font-family: 'Cinzel', serif; font-size: 10px; color: var(--parch); } .equip-empty { font-size: 11px; color: var(--muted); font-style: italic; } @media (max-width: 900px) { .paperdoll { grid-template-columns: 76px minmax(0, 1fr) 76px; gap: 8px; } .paperdoll-figure { min-height: 360px; } .equip-icon { font-size: 1rem; } .equip-label { font-size: 11px; } .equip-empty { font-size: 10px; } } /* --- Messagerie : onglets, barre d'actions groupées, lignes de messages --- */ .msg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .msg-count { background: var(--gold); color: #15181c; border-radius: 9px; margin-left: 4px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; padding: 0 6px; line-height: 1.5; } .msg-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 7px 10px; } .msg-selectall { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; margin: 0; cursor: pointer; } .msg-selectall input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--gold); } .msg-tool { background: none; border: 1px solid var(--panel-border); color: var(--parch); border-radius: 6px; width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; } .msg-tool:hover { border-color: var(--gold-dim); color: var(--gold); } .msg-tool--danger { color: var(--red); } .msg-tool--danger:hover { border-color: #7a3a3a; color: #e78791; } /* Liste : un seul cadre, lignes collées les unes aux autres (pas d'espace entre messages). */ .msg-list { padding: 0; overflow: hidden; } .msg-item { border-bottom: 1px solid #2a3038; } .msg-item:last-child { border-bottom: 0; } .msg-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 1.1rem; cursor: pointer; } .msg-row:hover { background: rgba(120, 95, 45, .10); } .msg-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--gold); } .msg-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; text-decoration: none; overflow: hidden; } .msg-star { color: var(--gold); flex: none; align-self: center; } .msg-who { flex: none; color: var(--muted); } .msg-subject { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-unread { color: var(--parch); font-weight: 700; } .msg-time { flex: none; color: var(--muted); font-size: 15px; } .msg-retention { margin-left: auto; font-size: .9rem; font-style: italic; } .msg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; } /* Corps du message, déplié sur place sous la ligne. */ .msg-body { padding: 4px 16px 16px 47px; background: rgba(8, 10, 13, .45); } .msg-content { color: var(--txt); font-size: 1.08rem; line-height: 1.55; white-space: pre-wrap; font-style: italic; } /* Fil de conversation (onglet Joueurs) : chaque échange, les miens décalés et signés en or. */ .thread-msg { padding: 9px 0; border-bottom: 1px dashed #2a3038; } .thread-msg:last-of-type { border-bottom: 0; } .thread-msg--mine { padding-left: 26px; } .thread-meta { font-size: .95rem; color: var(--muted); margin-bottom: 2px; } .thread-meta strong { color: var(--parch); } .thread-msg--mine .thread-meta strong { color: var(--gold); } .thread-subject { font-style: italic; } /* --- Lignes (constructions / labos / unités) --- */ .aryndor-row { background: var(--panel) !important; border: 1px solid var(--panel-border) !important; color: var(--txt); border-radius: 10px; margin-bottom: 8px; transition: border-color .2s; } .aryndor-row:hover { border-color: var(--gold-dim) !important; } .list-group { --bs-list-group-bg: transparent; } .action-cell { min-width: 160px; } /* --- Système de cartes (Château / Bâtiments / Recherches / Sorts) --- Desktop : ligne flex [média | (stats) | corps | colonne d'action]. Mobile : grille [média + corps] / stats / action pleine largeur (voir media query). */ .card-row { display: flex; align-items: center; gap: 16px; } .card-media { width: 180px; height: 144px; flex: none; position: relative; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .25); border-radius: 8px; overflow: hidden; } .card-media .media-icon { position: absolute; font-size: 2.4rem; } .card-media img { position: relative; width: 100%; height: 100%; object-fit: cover; } .card-stats { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 60px; font-size: 1rem; } .card-body { flex: 1 1 auto; min-width: 0; padding: 0; background: none; color: inherit; } .card-title { font-size: 1.5rem; } .card-desc { font-size: 1.05rem; line-height: 1.45; } .card-side { flex: none; width: 170px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .card-side--wide { width: 250px; font-size: 1.05rem; } .card-costs { display: flex; flex-direction: column; gap: 2px; font-size: 1.05rem; } .card-action { display: flex; flex-direction: column; gap: 6px; } /* ============================================================ MOBILE (≤ 900 px) — coquille « application » : bandeau ressources sticky + puces de sous-menu + bottom nav, cartes en grille, tableaux scrollables, cibles tactiles. ============================================================ */ @media (max-width: 900px) { :root { --bottomnav-h: 58px; } html { touch-action: manipulation; } body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); } /* .page{z-index:1} créait un contexte d'empilement : la sheet (z 1500) restait piégée SOUS le voile (z 1450 sur body) qui avalait tous les taps. On neutralise le contexte sur mobile ; la silhouette de repli .got-bg (raison d'être de ce z-index) est superflue ici, le fond est sur . */ .page { position: static; z-index: auto; } .got-bg { display: none; } /* Fond du monde : variante 960px (≈11 Ko) suffisante sur petit écran. */ body.world-a { --world-img: url('/img/world-a-mobile.avif'); } body.world-b { --world-img: url('/img/world-b-mobile.avif'); } .got-moon { display: none; } .mobile-only { display: block; } h2.cz { font-size: 1.35rem; } /* --- En-tête réduit : marque + messagerie (menus → bottom nav, profil → sheet) --- */ .topbar { padding: 8px 12px; gap: 10px; justify-content: space-between; } .brand { font-size: 19px; } .mainmenu, .topright { display: none; } .mail-btn { display: inline-flex; } /* --- Bandeau de ressources : sticky, défilable, tap → détail du royaume --- */ .resbar { display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 1200; height: 46px; padding: 0 12px; background: rgba(6, 8, 11, .96); border-bottom: 1px solid #2a3038; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: pointer; } .resbar::-webkit-scrollbar { display: none; } .resbar .res { display: flex; align-items: center; gap: 5px; flex: none; font-size: 14.5px; color: var(--parch); } .resbar .res i { color: var(--gold-dim); font-size: 16px; } .resbar .res .res-ico { font-size: 15px; line-height: 1; } .resbar .res-hint { position: sticky; right: 0; margin-left: auto; flex: none; color: var(--muted); font-size: 15px; padding-left: 10px; background: linear-gradient(to right, transparent, rgba(6, 8, 11, .96) 35%); } /* --- Sous-menu : puces défilantes horizontales, sticky sous le bandeau --- */ .submenubar { position: sticky; top: 46px; z-index: 1190; padding: 7px 10px; background: rgba(10, 13, 17, .96); } .submenu { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; } .submenu::-webkit-scrollbar { display: none; } .subitem { flex: none; white-space: nowrap; padding: 8px 13px; font-size: 13px; border-color: #2a3038; } .flash { padding: 10px 12px 0; } /* --- Layout : une colonne, colonne droite (vide) supprimée --- */ .layout { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 4px; gap: 12px; } .col-right { display: none; } /* --- Panneau royaume : bottom sheet ouverte depuis le bandeau de ressources --- */ .col-left { display: none; } body.dash-open .col-left { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; max-height: 82dvh; overflow-y: auto; } body.dash-open .col-left .panel { background: #101419; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: sheet-up .22s ease-out; } body.dash-open .col-left .panel::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: #3a4049; margin: 2px auto 12px; } body.dash-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1450; } @keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } } /* --- Navigation basse : 5 sections, safe-area iPhone --- */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; display: flex; background: rgba(6, 8, 11, .97); border-top: 1px solid #2a3038; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); } .bottomnav a, .bottomnav > span.disabled { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 3px 0; border-radius: 8px; color: var(--muted); text-decoration: none; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0; } /* Entrée verrouillée dans la barre mobile : grisée + cadenas, non cliquable. */ .bottomnav > span.disabled { color: #5b626b; opacity: .55; cursor: not-allowed; } /* 6 entrées sur petit écran : les libellés longs se tronquent au lieu de se chevaucher. */ .bottomnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } .bottomnav a i { font-size: 22px; line-height: 1; } .bottomnav a.active { color: var(--gold); } .bottomnav a.active i { text-shadow: 0 0 14px rgba(201, 168, 106, .55); } /* Icône « panneau du royaume » : bouton icône seule, à gauche de Royaume. */ .bottomnav-panel { flex: 0 0 auto; width: 52px; min-height: 48px; background: none; cursor: pointer; border: 0; border-right: 1px solid #2a3038; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); } .bottomnav-panel i { font-size: 26px; line-height: 1; } body.dash-open .bottomnav-panel { color: var(--gold); } body.dash-open .bottomnav-panel i { text-shadow: 0 0 14px rgba(201, 168, 106, .55); } /* --- Cartes : grille [média | corps] puis stats puis action, pleine largeur --- */ .card-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 12px; align-items: start; } .card-media { grid-row: 1; grid-column: 1; width: 88px; height: 88px; } .card-media.sovereign-portrait { width: 88px; height: 110px; } .card-media .media-icon { font-size: 1.8rem; } .card-body { grid-row: 1; grid-column: 2; } .card-title { font-size: 1.15rem; } .card-desc { font-size: .95rem; line-height: 1.4; } .card-stats { grid-column: 1 / -1; flex-direction: row; gap: 16px; font-size: .95rem; } .card-side, .card-side--wide { grid-column: 1 / -1; width: auto; border-top: 1px solid #232a32; padding-top: 10px; } .card-costs { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; } .card-body .d-flex > .text-secondary { white-space: nowrap; } .card-action { flex-direction: row; flex-wrap: wrap; align-items: center; } .card-action .card-costs { flex: 1 1 100%; } .card-action input.form-control { flex: 0 0 96px; width: 96px; } .card-action .btn { flex: 1 1 auto; } /* --- Cibles tactiles & saisie : champs ≥ 16 px (pas de zoom iOS), boutons ≥ 38 px --- */ input.form-control, select.form-select, textarea.form-control { font-size: 16px !important; } .form-control-sm, .form-select-sm { min-height: 38px; } .btn:not(.py-0) { min-height: 38px; } /* --- Tableaux : défilement horizontal fluide, typo resserrée --- */ .table-responsive { -webkit-overflow-scrolling: touch; } .table { font-size: .88rem; } .table-responsive .table { white-space: nowrap; } /* --- Formulaires en ligne (filtres Ennemis, formation Armées…) : 2 colonnes --- */ .aryndor-row .row > .col-auto { flex: 1 1 46%; max-width: none; } .aryndor-row .row > .col-auto > .form-control, .aryndor-row .row > .col-auto > .form-select { width: 100% !important; } /* Cartes de listes (infirmerie, messagerie…) : retour à la ligne autorisé. */ .list-group-item.aryndor-row { flex-wrap: wrap; } /* Lignes libellé/valeur (mouvements, rapports, soins…) : wrap plutôt que déborder. */ .aryndor-row .d-flex.justify-content-between, .panel .d-flex.justify-content-between { flex-wrap: wrap; gap: 2px 10px; } /* --- Chats : hauteur adaptée au viewport dynamique (clavier virtuel) --- */ #chat-box { height: calc(100dvh - 330px) !important; min-height: 220px; } /* Simulateurs : la base .8rem est trop petite pour Garamond (petit œil) sur mobile. */ #simForm, #expForm, #simForm [style*="font-size"], #expForm [style*="font-size"] { font-size: .95rem !important; } /* --- Simulateurs & chasse : champs denses élargis pour le tactile --- */ .sim-unit-a, .sim-unit-d { width: 30% !important; min-width: 64px; height: 34px !important; font-size: 15px !important; } .sim-tech-a, .sim-tech-d { width: 64px !important; height: 34px !important; } .exp-unit, .hunt-qty { width: 104px !important; height: 34px !important; font-size: 15px !important; } .exp-tech, .exp-num { height: 34px !important; } } /* ---- Forum d'alliance : thèmes (bandeaux), catégories, sujets, messages, sondages ---- */ .forum-theme { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.05rem; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-left: 3px solid var(--gold-dim); margin-bottom: 6px; } .forum-list { padding: 4px; } /* Catégories : rectangles compacts qui s'enchaînent sous chaque thème (modèle Kraland). */ .forum-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; } .forum-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--gold-dim); border-radius: 6px; text-decoration: none; color: var(--parch); font-size: 1.05rem; line-height: 1.4; background: rgba(16, 20, 25, .55); } .forum-chip:hover { border-color: var(--gold); color: var(--gold); } .forum-chip--active { background: rgba(120, 95, 45, .28); border-color: var(--gold); color: var(--gold); } .forum-chip-mail { color: #7bb35f; font-size: 1.05rem; } .forum-actions { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 1.08rem; } .forum-actions a { color: var(--gold); text-decoration: none; font-weight: 600; } .forum-actions a:hover { color: var(--parch); } .forum-content-title { font-family: 'Cinzel', serif; color: var(--parch); font-size: 1.25rem; text-align: center; margin-bottom: 8px; letter-spacing: .5px; } .forum-topic { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 6px; text-decoration: none; color: var(--txt); font-size: 1.08rem; line-height: 1.5; } .forum-topic:hover { background: rgba(212, 169, 78, .07); color: var(--txt); } .forum-topic + .forum-topic { border-top: 1px solid #1d242d; } .forum-topic-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .forum-topic-title { color: var(--parch); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .forum-topic-by { color: var(--muted); font-size: .98rem; } .forum-topic-by strong { color: #7bb35f; font-weight: 600; } .forum-topic-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--muted); font-size: .98rem; white-space: nowrap; flex: none; } .forum-topic-meta strong { color: #7bb35f; } .forum-fresh { color: var(--parch); } .forum-posts { display: flex; flex-direction: column; gap: 10px; } .forum-post { padding: 14px 16px; font-size: 1.08rem; line-height: 1.55; } .forum-post--mine { border-left: 3px solid var(--gold-dim); } .forum-post-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 1rem; } .forum-post-body { color: var(--txt); white-space: pre-wrap; } .forum-poll-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; } .forum-poll-bar { flex: 1; height: 10px; background: #1d242d; border-radius: 5px; overflow: hidden; min-width: 60px; } .forum-poll-fill { display: block; height: 100%; background: var(--gold-dim); border-radius: 5px; } .forum-poll-count { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .forum-cat-meta, .forum-topic-meta { display: none; } /* mobile : l'essentiel, sans les colonnes de droite */ } /* ---- Mise en forme des messages : barre d'outils + palette (forum, messagerie) ---- */ .mk-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; } .mk-group { display: inline-flex; gap: 3px; } .mk-toolbar button { background: rgba(16, 20, 25, .7); border: 1px solid var(--panel-border); color: var(--parch); border-radius: 5px; min-width: 30px; height: 30px; padding: 0 6px; cursor: pointer; font-family: 'EB Garamond', Georgia, serif; font-size: 1rem; line-height: 1; } .mk-toolbar button:hover { border-color: var(--gold); color: var(--gold); } .mk-emojis button { font-size: 1.05rem; } /* Palette fixe, assortie au thème — utilisée par les boutons ET le texte rendu. */ .mk-rouge { color: #d47a7a !important; } .mk-or { color: var(--gold) !important; } .mk-vert { color: #7bb35f !important; } .mk-bleu { color: #7ea8cf !important; } /* ---- Balises riches : images bornées, liens joueurs/alliances/externes ---- */ .mk-img { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; margin: 8px 0; border: 1px solid var(--panel-border); } .mk-link { color: var(--steel); } .mk-player { color: #7bb35f; text-decoration: none; border-bottom: 1px dotted rgba(123, 179, 95, .5); } .mk-player:hover { color: #9ed382; } .mk-ally { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold-dim); } .mk-ally:hover { color: var(--parch); } /* Liens-pseudo génériques dans les listes (forum, messagerie, membres…) : discrets, dorés au survol. */ a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(156, 122, 60, .55); } a.plink:hover { color: var(--gold); } /* ---- Page joueur ---- */ .player-head { display: flex; align-items: center; gap: 18px; } .player-portrait { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--gold-dim); box-shadow: 0 0 14px rgba(201, 168, 106, .25); } .player-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; } .player-online { color: #7bb35f; font-size: 1rem; vertical-align: middle; } .mk-profile { overflow-wrap: anywhere; } .score-table { border-collapse: collapse; font-size: 1.05rem; align-self: flex-start; } .score-table th { color: var(--gold); font-family: 'Cinzel', serif; font-weight: 600; font-size: .95rem; padding: 4px 14px; text-align: right; } .score-table td { padding: 4px 14px; border-top: 1px solid #1d242d; text-align: right; } .score-table td:first-child, .score-table th:first-child { text-align: left; } /* ===== Page « voir un joueur » (refonte tactique) ===== */ /* Identité en grille — desktop : avatar | (nom en h1, puces en h2) | distance-trajet à droite. */ .pl-identity { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "avatar name tac" "avatar chips tac"; column-gap: 18px; row-gap: 8px; align-items: center; } .pl-namebox { grid-area: name; } .pl-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 8px; } .pl-portrait { grid-area: avatar; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--gold-dim); box-shadow: 0 0 14px rgba(201, 168, 106, .25); } .pl-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; } .pl-online { color: #7bb35f; font-size: 1.35rem; line-height: 1; text-shadow: 0 0 8px rgba(123, 179, 95, .5); } /* Puces de statut */ .pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #14181d; border: 1px solid var(--panel-border); color: var(--txt); font-size: .92rem; text-decoration: none; } a.pl-chip:hover { border-color: var(--gold); color: var(--gold); } .pl-chip--ally { color: var(--gold); border-color: var(--gold-dim); } .pl-chip--free { color: #7bb35f; border-color: #3a5a34; } .pl-chip--vassal { color: var(--red); border-color: #5a3a3a; } .pl-chip--on { color: #7bb35f; border-color: #3a5a34; } /* Deux chiffres tactiques (distance / trajet) */ .pl-tac { grid-area: tac; display: flex; gap: 10px; flex: none; } .pl-tac-item { text-align: center; min-width: 84px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--panel-border); } .pl-tac-label { color: var(--gold-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; } .pl-tac-val { color: var(--parch); font-size: 1.5rem; font-family: 'Cinzel', serif; line-height: 1.1; } .pl-tac-sub { font-size: .78rem; color: var(--muted); } /* Face-à-face : barres opposées bleu (moi) / rouge (lui) */ .pl-legend { font-size: .9rem; color: var(--muted); } .pl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } .pl-dot--me { background: #5b8fc9; } .pl-dot--them { background: #c96a6a; } /* Barres divergentes depuis un centre : label + ma valeur | barre | sa valeur | rang. Fines, texte 1,1rem. */ .fb-row { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; font-size: 1.1rem; } .fb-label { flex: 0 0 auto; width: 165px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fb-val { flex: 0 0 58px; font-variant-numeric: tabular-nums; } .fb-val-me { color: #7ba6d4; text-align: right; } .fb-val-them { color: #d09090; text-align: left; } .fb-bar { flex: 1; display: flex; align-items: center; min-width: 80px; } .fb-half { flex: 1; display: flex; height: 9px; } .fb-half-left { justify-content: flex-end; } .fb-half-right { justify-content: flex-start; } .fb-fill { height: 100%; border-radius: 5px; } .fb-fill-me { background: linear-gradient(90deg, #3a5f88, #5b8fc9); } .fb-fill-them { background: linear-gradient(90deg, #c96a6a, #8f4141); } .fb-divider { flex: 0 0 auto; width: 2px; height: 17px; background: var(--gold-dim); border-radius: 1px; } .fb-rank { flex: 0 0 38px; text-align: right; color: var(--muted); font-size: .95rem; } /* Ligne Total : mise en avant + séparateur au-dessus */ .fb-row--total { font-size: 1.35rem; font-weight: 600; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--panel-border); } .fb-row--total .fb-label { color: var(--parch); } .fb-row--total .fb-val-me { color: #a7c6e6; } .fb-row--total .fb-val-them { color: #e0a8a8; } .fb-row--total .fb-half { height: 11px; } /* Terrain (ligne après le Total) : détachée, car hors du score total. */ .fb-row--total + .fb-row { margin-top: 14px; } .pl-verdict { font-size: 1.05rem; } /* Mobile : barres compactes pour que valeur de droite + rang tiennent (rang masqué). */ @media (max-width: 700px) { .fb-row { gap: 8px; font-size: 1rem; margin-bottom: 12px; } .fb-label { width: 128px; font-size: .9rem; } .fb-val { flex-basis: 40px; } .fb-rank { display: none; } .fb-row--total { font-size: 1.15rem; } /* Identité mobile (façon mockup) : ligne 1 = avatar + nom ; ligne 2 = distance/trajet (gauche) & puces en colonne (droite). */ .pl-identity { grid-template-columns: auto 1fr; grid-template-areas: "avatar name" "tac chips"; column-gap: 14px; row-gap: 12px; align-items: center; } .pl-portrait { width: 64px; height: 64px; } .pl-name { font-size: 1.35rem !important; } .pl-namebox { align-self: center; } .pl-chips { flex-direction: column; align-items: flex-start; align-self: start; } .pl-chips .pl-chip { padding: 3px 10px; font-size: .84rem; } .pl-tac { align-self: start; gap: 8px; } .pl-tac-item { min-width: 0; padding: 5px 11px; } .pl-tac-val { font-size: 1.2rem; } .pl-tac-label { font-size: .66rem; } .pl-tac-sub { font-size: .72rem; } } /* Cartes d'attaque (une par type d'assaut, la 1re recommandée) */ .atk-card { display: block; text-decoration: none; padding: 12px 14px; margin-bottom: 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--panel-border); color: var(--txt); transition: border-color .15s; } .atk-card:hover { border-color: var(--gold-dim); color: var(--txt); } .atk-head { display: flex; justify-content: space-between; align-items: center; font-family: 'Cinzel', serif; color: var(--parch); font-size: 1.05rem; } .atk-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #1a1509; background: var(--gold); padding: 2px 8px; border-radius: 999px; } .atk-desc { color: var(--muted); font-size: .92rem; margin: 6px 0; } .atk-go { color: var(--gold); font-size: .92rem; } .atk-card--reco { border-color: var(--gold); background: rgba(201, 168, 106, .08); } .atk-card--off { border-style: dashed; cursor: default; } .atk-card--off .atk-head { color: var(--muted); } /* Cartes d'attaque en ligne (pleine largeur sous le face-à-face) */ .atk-row { display: flex; gap: 10px; flex-wrap: wrap; } .atk-row .atk-card { flex: 1 1 200px; margin-bottom: 0; } /* Boutons Diplomatie */ .dip-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--panel-border); color: var(--parch); font-size: 1rem; text-decoration: none; cursor: pointer; font-family: inherit; } .dip-btn:hover { border-color: var(--gold); color: var(--gold); } .dip-btn i { color: var(--gold-dim); } .dip-btn--off { color: var(--muted); cursor: not-allowed; opacity: .7; } .dip-btn--off:hover { border-color: var(--panel-border); color: var(--muted); } .dip-cond { margin-left: auto; font-size: .78rem; color: var(--muted); font-style: italic; } .dip-row { display: flex; flex-direction: column; gap: 10px; } .dip-row form { width: 100%; margin: 0; } /* Bouton d'attaque unique (proéminent, doré) — la localisation se choisit sur l'écran d'attaque. */ .btn-attaquer { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 10px; background: var(--gold); color: #1a1509; font-weight: 600; font-size: 1.05rem; text-decoration: none; margin-top: auto; } .btn-attaquer:hover { background: #d9bd82; color: #1a1509; } /* Chip d'une catégorie PARTAGÉE entre alliances (Phase 3). */ .forum-chip--shared { border-style: dashed; } .forum-chip-tag { color: var(--steel); font-size: .9rem; } /* ---- Objets : couleurs de rareté (canon MMO, teinté Aryndor) + slots habillés ---- */ .item-name { font-weight: 600; } .rarity-COMMON { color: #c8ccd2; } .rarity-RARE { color: #7ea8cf; } .rarity-EPIC { color: #b48ad6; } .rarity-LEGENDARY { color: #e0a458; text-shadow: 0 0 8px rgba(224, 164, 88, .35); } .equip-item { font-size: .95rem; display: block; } /* ---- Grande Traque : barre de vie du monstre avec marqueurs de paliers ---- */ .traque-bar { position: relative; height: 18px; background: #1d242d; border-radius: 9px; overflow: hidden; } .traque-fill { height: 100%; background: linear-gradient(90deg, #6d2b2b, #c95555); border-radius: 9px; transition: width .4s; } .traque-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(231, 220, 192, .45); } /* ---- Aide en ligne : « ? » dans un cercle + panneau d'explications (motif de toutes les pages) ---- */ .aide-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: 8px; } .aide-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(255, 193, 7, .10); color: var(--gold); font-weight: 700; font-size: 1.25rem; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 0 10px rgba(255, 193, 7, .25); } .aide-btn:hover { background: rgba(255, 193, 7, .22); box-shadow: 0 0 14px rgba(255, 193, 7, .45); } .aide-pop { display: none; position: absolute; z-index: 60; top: 42px; right: -4px; left: auto; width: min(520px, 86vw); max-height: min(70vh, 620px); overflow-y: auto; background: #141a22; border: 1px solid var(--gold-dim); border-radius: 10px; padding: 16px 18px; color: #cfd6df; font-size: 1.05rem; font-weight: 400; font-family: 'EB Garamond', Georgia, serif; font-variant: normal; text-transform: none; letter-spacing: normal; text-align: left; line-height: 1.55; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); } .aide-pop h6 { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.02rem; margin: 14px 0 6px; } .aide-pop h6:first-child { margin-top: 0; } .aide-pop p { margin: 0 0 10px; } .aide-pop ul { margin: 0 0 10px; padding-left: 20px; } .aide-pop li { margin-bottom: 5px; } .aide-pop.open { display: block; } /* ---- Vignettes d'objets : l'illustration neutre + le CADRE porte la rareté ---- */ .item-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid #555; display: block; margin: 0 auto; } .item-frame-COMMON { border-color: #c8ccd2; } .item-frame-RARE { border-color: #7ea8cf; box-shadow: 0 0 6px rgba(126, 168, 207, .35); } .item-frame-EPIC { border-color: #b48ad6; box-shadow: 0 0 8px rgba(180, 138, 214, .45); } .item-frame-LEGENDARY { border-color: #e0a458; box-shadow: 0 0 10px rgba(224, 164, 88, .55); } /* --- Inventaire : grille façon coffre + fenêtre de la pièce --- */ .coffre-board { border: 1px solid var(--gold-dim); border-radius: 14px; padding: 16px; background: linear-gradient(180deg, rgba(30, 22, 12, .45), rgba(10, 9, 8, .72)); /* Vraie image de coffre à venir : background: url('/img/coffre-bg.jpg') center/cover; */ } .coffre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; } .coffre-tile { position: relative; aspect-ratio: 1 / 1; padding: 7px; background: rgba(255, 255, 255, .04); border: 2px solid #2a2f38; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, box-shadow .12s ease; } .coffre-tile:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0, 0, 0, .45); } .coffre-tile img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } .coffre-count { position: absolute; right: 4px; bottom: 4px; background: rgba(6, 8, 11, .92); color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 8px; font-family: Arial, sans-serif; font-size: .82rem; font-weight: 700; padding: 0 6px; line-height: 1.5; } .coffre-equipped { position: absolute; left: 4px; top: 4px; background: var(--gold); color: #15181c; width: 21px; height: 21px; border-radius: 50%; font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .coffre-tile.frame-COMMON { border-color: #4a4f57; } .coffre-tile.frame-RARE { border-color: #7ea8cf; box-shadow: 0 0 8px rgba(126, 168, 207, .22); } .coffre-tile.frame-EPIC { border-color: #b48ad6; box-shadow: 0 0 9px rgba(180, 138, 214, .28); } .coffre-tile.frame-LEGENDARY { border-color: #e0a458; box-shadow: 0 0 13px rgba(224, 164, 88, .35); } .coffre-empty { color: var(--muted); font-style: italic; padding: 6px 2px; } .item-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72); } .item-modal.open { display: flex; } .item-modal-card { position: relative; width: 100%; max-width: 420px; padding: 24px 22px 22px; background: #12161c; border: 1px solid var(--gold-dim); border-radius: 16px; text-align: center; box-shadow: 0 14px 44px rgba(0, 0, 0, .6); } .item-modal-close { position: absolute; right: 12px; top: 8px; background: none; border: none; color: var(--parch); font-size: 1.7rem; line-height: 1; cursor: pointer; } .item-modal-close:hover { color: var(--gold); } #itemModalBody img { width: 128px; height: 128px; object-fit: contain; margin: 2px auto 12px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); } .coffre-detail-name { font-size: 1.35rem; letter-spacing: .5px; margin-bottom: 4px; } .coffre-detail-stats { font-size: 1.05rem; color: var(--parch); margin-bottom: 10px; } #itemModalBody form { margin: 9px 0 0; } #itemModalBody .btn { width: 100%; padding: 11px; font-size: 1.08rem; } #itemModalBody select { width: 100%; margin-bottom: 8px; padding: 9px; font-size: 1.05rem; } /* Déséquiper depuis le paper doll : la vignette elle-même devient le bouton. */ .equip-unequip { margin: 0; padding: 0; border: none; background: none; line-height: 0; } .equip-unequip-btn { margin: 0; padding: 0; border: none; background: none; cursor: pointer; line-height: 0; } .equip-unequip-btn:hover .item-thumb { filter: brightness(1.12); box-shadow: 0 0 9px rgba(224, 164, 88, .55); } /* --- Formation défensive (page Armées) : flèches de déplacement + en-têtes cliquables --- */ .btn-move { background: none; border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 6px; padding: 0 7px; margin: 0 2px; cursor: pointer; font-size: 1rem; line-height: 1.4; font-weight: 700; vertical-align: middle; } .btn-move:hover { background: var(--gold); color: #15181c; } .th-move { background: none; border: 1px solid transparent; color: var(--gold); border-radius: 7px; padding: 3px 10px; cursor: pointer; font-family: 'Cinzel', serif; font-size: .95rem; letter-spacing: .5px; transition: border-color .12s, background .12s; } .th-move:hover { border-color: var(--gold-dim); background: rgba(201, 168, 106, .12); } .formation-stat td { font-size: 1.05rem; } .formation-stat-label { color: var(--parch); font-weight: 600; } /* --- Formation : compactage + détail des bonus dépliable --- */ .formation-table td, .formation-table th { padding: .28rem .5rem !important; font-size: .95rem; } /* Chevrons aérés : bien détachés du nombre pour une lecture claire. */ .formation-table .btn-move { padding: 1px 9px; font-size: .95rem; margin: 0 9px; } .formation-table .th-move { padding: 2px 8px; font-size: .9rem; } .stat-toggle { background: none; border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 7px; padding: 2px 12px; cursor: pointer; font-size: .9rem; } .stat-toggle:hover { background: rgba(201, 168, 106, .12); } .stat-total { cursor: pointer; } .stat-total:hover .stat-name { color: var(--gold); } .stat-total td { font-weight: 600; } .stat-total .stat-name { color: var(--parch); } .stat-caret { display: inline-block; width: 1em; color: var(--gold-dim); transition: transform .12s; } .stat-detail td { font-size: .9rem; color: var(--muted); padding-top: .12rem !important; padding-bottom: .12rem !important; } .stat-detail .stat-sub { padding-left: 1.6rem; font-style: italic; } /* Ligne « Bonus sorts » : mise en valeur (un sort temporaire est actif). */ .spell-line td { color: #cbaef0 !important; font-style: normal !important; background: rgba(180, 138, 214, .10); text-shadow: 0 0 7px rgba(180, 138, 214, .35); } .spell-active { margin-left: 5px; } /* --- Carte du monde : surface parchemin, points, légende, infobulle --- */ .map-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: .95rem; color: var(--parch); } .map-leg { display: inline-flex; align-items: center; gap: 6px; } .map-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; } .map-filter { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; } .map-filter input { width: 16px; height: 16px; accent-color: var(--gold); } .map-wrap { position: relative; max-width: 660px; margin: 0 auto; border: 1px solid var(--gold-dim); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); } #worldMap { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; cursor: grab; touch-action: none; /* Vraie texture de parchemin ; repli sur un dégradé si l'image est absente. */ background: url('/img/parchemin.png') center / cover no-repeat, radial-gradient(ellipse at 50% 40%, #e8dcbf 0%, #dccaa0 55%, #c9b483 100%); } #worldMap.grabbing { cursor: grabbing; } .map-motif { filter: sepia(.7) saturate(.55) brightness(.48) opacity(.72); pointer-events: none; } .map-ctrl { position: absolute; z-index: 8; display: grid; gap: 4px; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); } .map-ctrl.pad { right: 12px; bottom: 12px; } .map-ctrl.zoom { right: 12px; top: 12px; grid-template-columns: 30px; grid-template-rows: repeat(2, 30px); } .map-ctrl button { background: rgba(6, 8, 11, .8); border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .map-ctrl button:hover { background: var(--gold); color: #15181c; } .map-ctrl .c-up { grid-column: 2; grid-row: 1; } .map-ctrl .c-left { grid-column: 1; grid-row: 2; } .map-ctrl .c-right { grid-column: 3; grid-row: 2; } .map-ctrl .c-down { grid-column: 2; grid-row: 3; } .map-ctrl .c-center { grid-column: 2; grid-row: 2; font-size: .9rem; } .map-node:hover circle { filter: brightness(1.12); } .map-tip { position: absolute; display: none; z-index: 10; pointer-events: none; background: rgba(6, 8, 11, .94); border: 1px solid var(--gold-dim); border-radius: 8px; color: var(--parch); padding: 7px 10px; font-size: .9rem; line-height: 1.5; max-width: 240px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); } .map-tip strong { color: var(--gold); } .map-tip-tag { color: var(--steel); } .map-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6a5636; font-style: italic; font-size: 1.05rem; text-align: center; } /* ===== Guide de bienvenue (onboarding) ===== */ .ob-overlay { position: fixed; inset: 0; z-index: 3000; pointer-events: none; background: transparent; } .ob-overlay.ob-dim { background: rgba(0, 0, 0, .55); } .ob-spot { position: fixed; border-radius: 10px; pointer-events: none; display: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55), 0 0 0 2px var(--gold); transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; } .ob-bubble { position: fixed; z-index: 3001; max-width: min(360px, calc(100vw - 24px)); pointer-events: auto; background: #14181d; border: 1px solid var(--gold); border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); color: var(--parch); font-size: 1rem; line-height: 1.45; } .ob-head { color: var(--gold-dim); font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .ob-title { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.18rem; margin-bottom: 8px; } .ob-text { color: #d8ceb6; margin-bottom: 12px; } .ob-hint { color: #7fd6a3; background: rgba(60, 160, 100, .12); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; font-size: .96rem; } .ob-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ob-btn { background: var(--gold); color: #1a1509; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: .98rem; cursor: pointer; text-decoration: none; display: inline-block; } .ob-btn:hover { background: #d9bd82; color: #1a1509; } .ob-skip { background: none; border: none; color: var(--muted); font-size: .9rem; cursor: pointer; text-decoration: underline; padding: 4px; } .ob-skip:hover { color: var(--parch); } /* Mode « pointeur » du guide : la fenêtre d'étape s'efface, seule une pastille désigne l'entrée de menu à cliquer (le joueur navigue lui-même et apprend le chemin). */ .ob-bubble.ob-pointer { max-width: none; width: auto; white-space: nowrap; padding: 8px 14px; font-size: .98rem; border-radius: 999px; background: #14181d; border: 1px solid var(--gold); color: var(--parch); box-shadow: 0 8px 26px rgba(0, 0, 0, .55); animation: ob-pulse 1.6s ease-in-out infinite; } .ob-bubble.ob-pointer b { color: var(--gold); } @keyframes ob-pulse { 0%, 100% { box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 0 0 rgba(201, 168, 106, .45); } 50% { box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 0 8px rgba(201, 168, 106, 0); } } /* Mobile : bulles du guide nettement plus compactes. Sur petit écran, une bulle pleine largeur masque le formulaire à remplir (répartition des serviteurs, km² d'expédition…) et gêne la saisie. On réduit largeur, marges et tailles de police pour dégager la place. */ @media (max-width: 700px) { .ob-bubble { max-width: min(290px, calc(100vw - 28px)); padding: 9px 11px; font-size: .82rem; line-height: 1.32; border-radius: 10px; } .ob-head { font-size: .66rem; margin-bottom: 2px; } .ob-title { font-size: .95rem; margin-bottom: 4px; } .ob-text { margin-bottom: 7px; } .ob-hint { padding: 6px 8px; margin-bottom: 7px; font-size: .8rem; } .ob-actions { gap: 8px; } .ob-btn { padding: 7px 12px; font-size: .88rem; } /* Pointeur (« 👉 Cliquez sur X ») : autoriser le retour à la ligne pour rester étroit. */ .ob-bubble.ob-pointer { white-space: normal; max-width: min(290px, calc(100vw - 28px)); padding: 7px 11px; font-size: .86rem; } } /* Butin annoncé dans un rapport : visuel de la pièce + stats (survol ou ligne dédiée). */ .msg-loot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; background: rgba(201, 168, 106, .07); border: 1px solid var(--gold-dim); border-radius: 10px; } .msg-loot img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; flex: none; } .msg-loot-name { display: block; font-size: 1.02rem; } .msg-loot-stats { display: block; color: #7fd6a3; font-size: .92rem; }