@font-face { font-family: Oxanium; font-weight: 500; src: url(../img/polices/oxanium-latin-500-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Oxanium; font-weight: 700; src: url(../img/polices/oxanium-latin-700-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Rajdhani; font-weight: 500; src: url(../img/polices/rajdhani-latin-500-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Rajdhani; font-weight: 600; src: url(../img/polices/rajdhani-latin-600-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url(../img/polices/share-tech-mono-latin-400-normal.woff2) format('woff2'); font-display: swap; }
.cadre { position: relative; }
.scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000 url(../img/fond.webp) center / cover; }
.bloc { font-family: Rajdhani, system-ui, sans-serif; font-weight: 500; text-shadow: 0 1px 3px #000c; position: absolute; box-sizing: border-box; padding: 4px 6px; display: flex; align-items: center; overflow: hidden; background-size: cover; white-space: pre-line; }
.bloc.img { padding: 0; }
/* Bloc à forme tracée : contour SVG derrière le texte, lueur non rognée. */
.bloc.forme { overflow: visible; isolation: isolate; }
.bloc > svg.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; stroke-width: 2; stroke-linejoin: round; }
/* Styles de panneau (bloc.pan). A : coins coupés ; B : équerres + bande de titre ; C : barre lumineuse. */
.pan-A { background-image: linear-gradient(160deg, #152634, #0b141b); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.pan-A::before { content: ""; position: absolute; inset: 0; background: #94d3f9; clip-path: inherit; }
.pan-A::after { content: ""; position: absolute; inset: 1px; background: linear-gradient(160deg, #152634, #0b141b); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.pan-B { background-image: linear-gradient(180deg, #111f2bcc, #0a131acc); box-shadow: inset 0 0 18px #94d3f922; }
.pan-B::before, .pan-B::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid #cdecff; filter: drop-shadow(0 0 3px #94d3f9); }
.pan-B::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.pan-B::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.pan-C { background-image: linear-gradient(90deg, #94d3f922, #0e1820 40%); border-left: 3px solid #94d3f9; box-shadow: -4px 0 12px -4px #94d3f9; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
/* D rails ; E verre ; H bandeau ; J console ; K pointillés ; M néon fin ; N onglet. I octogone et L flancs pointus : liseré = ::before (clip) + ::after (fond, clip réduit). */
.pan-D { border-top: 1px solid #94d3f9; border-bottom: 1px solid #94d3f9; background-image: linear-gradient(180deg, #94d3f91c, transparent 30%, transparent 70%, #94d3f91c); }
.pan-D::before, .pan-D::after { content: ""; position: absolute; top: 30%; height: 40%; width: 2px; background: #cdecff; box-shadow: 0 0 6px #94d3f9; }
.pan-D::before { left: 0; } .pan-D::after { right: 0; }
.pan-E { border-radius: 12px; border: 1px solid #94d3f955; background-image: linear-gradient(180deg, #ffffff14, #ffffff05); box-shadow: inset 0 1px 0 #ffffff33, 0 0 16px #94d3f922; }
.pan-H { background-image: linear-gradient(180deg, #94d3f926, #0e1820b3 45%); }
.pan-H::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #cdecff, #94d3f900); }
.pan-H::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border: 1px solid #94d3f966; border-top: 0; border-left-color: #cdecff; border-right-color: #cdecff; clip-path: polygon(0 0, 6px 0, 6px 100%, calc(100% - 6px) 100%, calc(100% - 6px) 0, 100% 0, 100% 100%, 0 100%); }
.pan-I, .pan-L { background-image: linear-gradient(180deg, #152634, #0b141b); }
.pan-I::before, .pan-L::before, .pan-I::after, .pan-L::after { content: ""; position: absolute; inset: 0; background: #94d3f9; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.pan-I::after, .pan-L::after { inset: 1px; background: linear-gradient(180deg, #152634, #0b141b); clip-path: polygon(8.3px 0, calc(100% - 8.3px) 0, 100% 8.3px, 100% calc(100% - 8.3px), calc(100% - 8.3px) 100%, 8.3px 100%, 0 calc(100% - 8.3px), 0 8.3px); }
.pan-I, .pan-I::before { clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.pan-L, .pan-L::before { clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.pan-L::after { clip-path: polygon(9.3px 0, calc(100% - 9.3px) 0, 100% 50%, calc(100% - 9.3px) 100%, 9.3px 100%, 0 50%); }
.pan-J { background-image: linear-gradient(180deg, #111f2b, #0b141b); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); border-bottom: 3px solid #94d3f9; box-shadow: inset 0 -14px 14px -14px #94d3f988; }
.pan-J::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; background: repeating-linear-gradient(90deg, #94d3f966 0 2px, transparent 2px 8px); }
.pan-K { border: 1px dashed #94d3f999; background-image: linear-gradient(#0e1922, #0e1922); }
.pan-K::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(#cdecff, #cdecff) 0 0/5px 5px no-repeat, linear-gradient(#cdecff, #cdecff) 100% 0/5px 5px no-repeat, linear-gradient(#cdecff, #cdecff) 0 100%/5px 5px no-repeat, linear-gradient(#cdecff, #cdecff) 100% 100%/5px 5px no-repeat; pointer-events: none; }
:root { --cadre: #94d3f9; } /* teinte des cadres : le ton vert-bleu du fond */
.pan-M, .pan-M0 { border: 1px solid var(--cadre); border-radius: 4px; box-shadow: 0 0 8px var(--cadre), inset 0 0 12px color-mix(in srgb, var(--cadre) 27%, transparent); }
.pan-M { background-image: linear-gradient(#0a121999, #0a121999); }
.pan-N { background-image: linear-gradient(180deg, #111f2b, #0b141b); border: 1px solid #94d3f988; border-top-color: #94d3f9; }
.pan-N::before { content: ""; position: absolute; left: -1px; top: -1px; width: 70%; height: 28px; background: #94d3f933; border: 1px solid #94d3f9; border-bottom: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
.bloc.actif { color: #cdecff; box-shadow: 0 0 10px #94d3f9, inset 0 0 12px #94d3f966; }
/* Page : blocs masqués quand la page du panneau central n'est pas la leur (jamais dans le Designer). Barre de navigation. */
.scene:not(.edit) .hors, .scene:not(.edit) .cache, .scene.vue .hors { display: none !important; } /* .vue = aperçu du Designer sur une page précise */
.bloc.icb { flex-direction: column; justify-content: center; gap: 4px; padding: 0; cursor: pointer; text-align: center; } .icb img { width: 36px; height: 36px; flex: none; object-fit: contain; } .icb span { font-size: 12px; color: #b6c6c9; }
.bloc.img.actif, .bloc.icb.actif { box-shadow: none; } .img.actif img, .icb.actif img { filter: brightness(1.35); } .icb.actif span { color: #cdecff; }
.bloc.onglets-larges .onglet { flex: 1; text-align: center; }
/* Liste de gauche : cases défilantes. */
.bloc.liste { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; overflow-y: auto; padding: 0; scrollbar-width: thin; }
.carte { position: relative; flex: none; }
.bloc[data-id="carte.couts"] { flex-wrap: wrap; align-content: center; gap: 0 8px; } .bloc[data-id="carte.couts"] span { display: inline-flex; align-items: center; gap: 3px; } .bloc[data-id="carte.couts"] u { display: inline-block; width: 12px; height: 12px; }
.bloc[data-id="carte.image"] { background-size: contain; background-repeat: no-repeat; background-position: center; mix-blend-mode: screen; }
.qte { -moz-appearance: textfield; appearance: textfield; }
/* Chat déplié : onglets, messages (les autres à gauche, soi à droite), champ de texte. Rien d'interactif dans le Designer (mode édition). */
.bloc.chat-onglets { gap: 4px; overflow-x: auto; scrollbar-width: none; }
.onglet { padding: 5px 12px; border: 1px solid #94d3f955; border-radius: 6px 6px 0 0; white-space: nowrap; cursor: pointer; color: #b6c6c9; }
.onglet.on { background: #94d3f933; border-color: #cdecff; color: #fff; }
.bloc.chat-msgs { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.msg { max-width: 78%; align-self: flex-start; padding: 5px 9px; border-radius: 4px 10px 10px 10px; background: #162a3b; line-height: 1.3; }
.msg small { display: block; font-size: 10px; color: #cdecff; }
.msg.moi { align-self: flex-end; border-radius: 10px 4px 10px 10px; background: #1f4261; }
.bloc input:not([type=checkbox]) { width: 100%; height: 100%; box-sizing: border-box; padding: 0 10px; border: 1px solid #94d3f988; border-radius: 6px; background: #0a131a; color: #fff; font: inherit; outline: none; }
.scene.edit .bloc input, .scene.edit .onglet { pointer-events: none; }
/* Messages : liste condensée et fenêtre de détail. Chat : accueil, pastille, outils. */
.bloc.msg-liste { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 4px; overflow-y: auto; scrollbar-width: thin; }
.lmsg { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 6px 10px; border-radius: 4px; background: #101e2b; color: #b6c6c9; text-align: left; cursor: pointer; }
.lmsg:hover { background: #1a2f42; } .lmsg b { flex: 1; font-weight: 400; } .lmsg.nonlu b { font-weight: 700; color: #fff; }
.lmsg span { width: 140px; color: #cdecff; } .lmsg em { width: 70px; font-style: normal; font-size: 12px; text-align: right; }
.vide { margin: auto; color: #cdecff; }
.bloc.msg-detail { display: block; padding: 14px 18px; overflow-y: auto; text-align: left; }
.msg-detail b { display: block; font-size: 18px; color: #fff; } .msg-detail small { color: #cdecff; } .msg-detail p { margin: 12px 0 0; line-height: 1.4; }
.conv { padding: 8px 10px; border-radius: 6px; background: #162a3b; cursor: pointer; color: #fff; }
.conv small { display: block; margin-top: 2px; overflow: hidden; color: #b6c6c9; text-overflow: ellipsis; white-space: nowrap; }
.badge, .bloc.notif { border-radius: 999px; background: #ff4d4d; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; }
.badge { float: right; min-width: 18px; padding: 1px 6px; text-align: center; }
.bloc.notif { display: grid; place-items: center; padding: 0; line-height: 1; cursor: pointer; }
.scene:not(.edit) .notif:empty { display: none; }
.scene:not(.edit) .btn { cursor: pointer; } /* tout bloc de type BTN : main au survol (jeu et mode jouable) */
.scene:not(.edit) .bloc.off { opacity: .35; pointer-events: none; }
.bloc.fav { color: #ffc233 !important; }
/* Messages : case, ✕ par ligne, bouton Bloquer. Chat : icônes à droite de chaque ligne de l'Accueil. Carte : vue système au-dessus de la carte, sous le bandeau. */
.lmsg input { margin: 0; accent-color: #94d3f9; cursor: pointer; } .lmsg .x { font-style: normal; color: #cdecff; cursor: pointer; padding: 0 4px; } .lmsg .x:hover { color: #ff6b6b; }
.msg-detail .bloquer { margin-top: 14px; padding: 4px 12px; border: 1px solid #ff6b6b; border-radius: 4px; background: #ff6b6b22; color: #fff; font: inherit; cursor: pointer; }
.conv { display: flex; align-items: center; gap: 6px; } .conv > div { flex: 1; min-width: 0; } .conv.bloquee { opacity: .5; }
.conv .ico { display: flex; gap: 2px; } .conv .ico i { padding: 2px 4px; font-style: normal; color: #cdecff; cursor: pointer; } .conv .ico i:hover { color: #fff; } .conv .ico i.fav { color: #ffc233; }
.sysvue { position: absolute; inset: 0; padding-right: 356px; box-sizing: border-box; display: none; align-items: center; justify-content: center; pointer-events: none; }
.sysvue.on { display: flex; } .sysvue svg { width: 100%; height: 100%; } .sysvue small { position: absolute; left: 0; right: 356px; top: 8px; text-align: center; font-size: 14px; color: #b6c6c9; }
.qte::-webkit-outer-spin-button, .qte::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Carte : infobulle au survol, infos et missions de la vue système, suivi de cible (panneau de gauche). */
.bulle { position: absolute; z-index: 2; display: none; min-width: 190px; padding: 8px 12px; pointer-events: auto; border: 1px solid #cdecff; border-radius: 4px; background: #0a1219ee; box-shadow: 0 0 8px #94d3f9, inset 0 0 12px #94d3f944; color: #b6c6c9; font-size: 12px; line-height: 1.5; text-align: left; white-space: normal; }
.bulle.on { display: block; } .bulle b { display: block; font-size: 14px; color: #fff; } .bulle span { display: block; } .bulle .listes { margin-top: 6px; }
/* Panneau de missions de la vue système : un bloc par élément (accueil.sys-*, src/blocs.js), remplis par src/carte.js. */
.bloc.sys-mission { justify-content: flex-start; gap: 8px; padding: 4px 8px; text-align: left; cursor: pointer; }
.bloc.sys-mission u { width: 32px; height: 32px; display: inline-block; flex: none; } .bloc.sys-mission u img { width: 100%; height: 100%; display: block; object-fit: contain; }
.bloc.sys-flottes { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: calc((100% - 16px) / 5); gap: 4px; padding: 4px; align-content: start; overflow-y: auto; scrollbar-width: thin; }
.fi { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 1px 2px; font: inherit; font-size: 10px; line-height: 11px; text-align: center; overflow: hidden; cursor: pointer; } .fi img { width: 15px; height: 15px; object-fit: contain; } .fi span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi.occ { opacity: .35; cursor: default; }
.bloc.sys-encours { display: block; overflow: hidden; padding: 0 4px; } .sys-encours p { margin: 2px 0; } .sys-encours b { color: #cdecff; } .rap { padding: 0 4px; border: 1px solid #94d3f9; border-radius: 4px; background: none; color: #e6f0ef; font: inherit; font-size: 10px; cursor: pointer; }
.bloc.sys-recap, .bloc.sys-trajet { text-align: left; } .bloc.sys-repli label { font-size: 13px; } .bloc.sys-repli input.rep { width: 52px; height: 22px; padding: 3px; text-align: center; }
.bloc.sys-envoyer.off { opacity: .4; cursor: default; }
.rep { width: 52px; color: inherit; border: 1px solid #94d3f9; border-radius: 4px; padding: 3px; text-align: center; }
.bloc.cible { justify-content: center; padding: 0; cursor: pointer; } .bloc.cible u { display: block; width: 26px; height: 26px; }
.bloc.cibles { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 0; overflow-y: auto; scrollbar-width: thin; }
.cibles > div { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; background: #101e2b; color: #b6c6c9; cursor: pointer; } .cibles > div:hover { background: #1a2f42; color: #fff; } .cibles i { width: 8px; height: 8px; border-radius: 50%; }

/* Filtres de statut de la carte : anneau fin de la couleur du statut avec un point lumineux au centre ; appuyé = anneau éteint, point retiré. */
.bloc.rond { padding: 0; border-radius: 50%; border: 2px solid var(--c); background-image: radial-gradient(circle, var(--c) 0 34%, transparent 38%); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 5px color-mix(in srgb, var(--c) 40%, transparent); cursor: pointer; transition: opacity .15s, transform .15s, box-shadow .15s; }
.scene:not(.edit) .bloc.rond:hover { transform: scale(1.12); } .bloc.rond.presse { opacity: .4; background-image: none; box-shadow: none; }
.bloc.cible.presse { opacity: .4; }

.listes { display: flex; align-items: center; gap: 6px; } .listes b { margin-right: auto; font-size: 13px; font-weight: normal; color: #b6c6c9; }
.listes .lt { box-sizing: border-box; width: 34px; height: 34px; padding: 2px; border: 1px solid #94d3f988; border-radius: 6px; background: #101e2b; cursor: pointer; } .listes .lt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.listes .lt.on { border-color: #cdecff; background: #94d3f933; box-shadow: 0 0 8px #94d3f9; }
/* Cliquable : orange doux (palette DA, docs da/couleurs/palette-finale.md). Teal = structure, bleu glace = images. */
:root { --clic: #da9a62; --clic-f: #da9a6233; }
.onglet.on { box-shadow: 0 0 8px #94d3f9; } /* onglets : même bleu que le reste (pas orange) */
.msg-detail .bloquer { border-color: var(--clic); }
.bloc.actif { color: #fff; box-shadow: none; }
.lmsg input { accent-color: var(--clic); }
/* Chat déplié : fond opaque (sinon la page dessous transparaît). */
.bloc[data-id="accueil.chat-cadre"] { background-image: linear-gradient(#0b141b, #0b141b); }
/* Cadres holo (DA de forme) : le trait est une image 9 tranches (border-image) posée en ::before, qui déborde de l'élément pour le halo ; aucun fond. */
.fi, .listes .lt { position: relative; background: none !important; border-color: transparent !important; box-shadow: none !important; color: #e6f0ef; }
.bloc[data-id="carte.cadre"] { overflow: visible; } .bloc[data-id="carte.cadre"]::before { content: ""; position: absolute; inset: -10px; border: 26px solid transparent; border-image: url(../img/cadres/carte.webp) 26; pointer-events: none; }
.fi::before, .listes .lt::before, .bloc.pan-holo::before { content: ""; position: absolute; inset: -5px; border: 15px solid transparent; border-image: url(../img/cadres/bouton.webp) 15; pointer-events: none; }
.bloc.pan-holo { overflow: visible; }
.fi.on::before, .listes .lt.on::before, .bloc.pan-holo.actif::before, .bloc.pan-holo.presse::before { filter: brightness(1.8) drop-shadow(0 0 4px #94d3f9); }
.bloc.liste { padding: 10px; }
/* Navigation en blanc (icônes et libellés), états actifs compris. */
.icb span, .icb.actif span { color: #e6f0ef; }
.trajet, .vide { color: #e6f0ef; background: none; } .rep { background: none; border-color: #94d3f9; }
.cibles > .vide { background: none; } .envoi .trajet { color: #e6f0ef; }

/* Station : image par niveau, quartiers cliquables (copie de l'image découpée, éclairée en orange au survol ou quand la zone est ouverte). */
.stn { position: relative; height: 100%; aspect-ratio: 3 / 2; margin: 0 auto; } .stn img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zs { position: absolute; inset: 0; cursor: pointer; }
.bloc[data-id="carte.titre"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc[data-id="carte.duree"], .bloc[data-id="carte.bouton"] { white-space: nowrap; }

/* Compositeur, onglet Flotte */
.comp-flotte { display: grid !important; grid-template-columns: 200px 1fr; gap: 12px; padding: 8px; font-size: 13px; text-align: left; overflow-y: auto; align-content: start; place-items: start stretch !important; }
.cf-edit { text-align: left; }
.cf-liste { display: grid; gap: 4px; align-content: start; } .cf-liste button, .cf-edit button { font: inherit; color: #e6f0ef; background: #0a1a2a; border: 1px solid #2b5a7a; padding: 4px 8px; cursor: pointer; }
.cf-liste button { display: flex; justify-content: space-between; } .cf-liste button.on, .cf-edit .ok { border-color: #94d3f9; box-shadow: 0 0 6px #94d3f9; } .cf-edit button:disabled { opacity: .35; cursor: default; }
.cf-edit p { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; } .cf-edit p span { display: flex; align-items: center; gap: 8px; } .cf-edit i { min-width: 28px; text-align: center; font-style: normal; } .cf-edit small, .cf-liste small { color: #9fb6bd; font-size: 11px; } .cf-msg { display: block; margin-top: 6px; color: #f88 !important; }

/* Construction en cours : cadre de la case en vert, lignes sous les boutons de zone. */
.carte.enc [data-id="carte.cadre"] { filter: hue-rotate(-70deg) saturate(1.2); }
.carte.enc [data-id="carte.duree"] { color: #7be39c; }
.bloc.encours { display: block; overflow: hidden; line-height: 1.2; text-align: left; }
.bloc.encours div { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 1px; white-space: nowrap; } .bloc.encours b { font-weight: 400; } .bloc.encours span { color: #b6c6c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Champ de quantité des vaisseaux : large et centré pour voir ce qu'on tape. */
.bloc input.qte:not([type=checkbox]) { padding: 0 2px; text-align: center; font-size: 12px; }
/* Récap de production d'une ressource. */
.bloc.recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; overflow: hidden; text-align: left; align-content: start; } .recap h3 { margin: 0; font-size: 18px; font-weight: 600; color: #cdecff; } .recap section > small { color: #768993; font-size: 12px; display: block; margin-bottom: 6px; }
.recap .rr { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 10px; padding: 18px 0; border-top: 1px solid #94d3f933; } .recap .rr u { width: 30px; height: 30px; grid-row: span 2; } .recap .rr .stk { font-size: 20px; text-align: right; } .recap .rr em { font-style: normal; color: #7be39c; font-size: 12px; grid-column: 2 / -1; } .recap .rr small { grid-column: 1 / -1; color: #768993; font-size: 11px; }
.bloc.recap-flotte { display: block; overflow-y: auto; } .recap-flotte h3 { margin-bottom: 10px; } .recap-flotte .vide { color: #768993; }
.rf { position: relative; display: grid; grid-template-columns: 1.4fr 1.6fr 90px 1.4fr; gap: 8px; align-items: center; padding: 10px 6px; border-top: 1px solid #94d3f933; cursor: default; } .rf:hover { background: #94d3f914; } .rf em { font-style: normal; color: #7be39c; } .rf .p-combat { color: #ff7b7b; } .rf .dur { text-align: right; color: #b6c6c9; }
.rf .tip { position: absolute; left: 40%; top: 100%; z-index: 5; width: 360px; padding: 10px 12px; background: #0a1822ee; border: 1px solid #94d3f9; border-radius: 6px; font-size: 12px; line-height: 1.5; color: #e6f0ef; pointer-events: none; } .rf .tip i { color: #cdecff; font-style: normal; font-weight: 600; }