/* Couleurs des badges de classe de composant (militaire/civil/industriel/furtif/compétition, voir plus bas .part-class-badge) — variables locales à ce fichier, comme --gain/--warn dans main.css, avec une variante clarté pour le thème clair (même mécanisme que main.css). */ :root{ --class-military:#D9534F; --class-civilian:#4F8FE0; --class-industrial:#B08B4F; --class-stealth:#9B6FD1; --class-competition:#4FB088; } @media (prefers-color-scheme: light){ :root[data-theme="auto"]{ --class-military:#B23B31; --class-civilian:#1E5FB0; --class-industrial:#8A6A2E; --class-stealth:#6B3FA0; --class-competition:#157A56; } } :root[data-theme="light"]{ --class-military:#B23B31; --class-civilian:#1E5FB0; --class-industrial:#8A6A2E; --class-stealth:#6B3FA0; --class-competition:#157A56; } /* Onglet Vaisseaux : recherche + fiche technique (armes, bouclier, vitesse) */ /* Coquille applicative v14 (28 sept. 2026 — remplace la v10/v13 à 3 zones fixes côte à côte). Cripsis, après la v13 (qui avait déjà déplacé Bouclier/Générateur d'énergie/Refroidissement/ Support vie vers la colonne de droite, mais gardait 3 zones fixes gauche/centre/droite) : « c'est pas le meme rendu [...] recopie la TOTALITER de la disposition du site ERKUL, mise en page, visuel ect ». Reconnaissance en direct sur https://erkul.games/calculator (DOM réel via getBoundingClientRect()/getComputedStyle(), pas juste des captures, 28 sept. 2026) : chez Erkul il n'y a PAS 3 colonnes fixes côte à côte. C'est UNE SEULE colonne centrée (.dash-content, max-width mesuré 1272px, soit 3 "pistes" de 413.33px + 2 x 16px de marge — recoupé exactement par le calcul (1272-32)/3=413.33), organisée en 3 sections empilées : 1. une en-tête (recherche + identité du vaisseau) ; 2. une rangée à 3 COLONNES ÉGALES juste en dessous (Damage/Defense/Hull, `.dash-center`, grid-template-columns mesuré "413.328px 413.328px 413.344px") ; 3. une zone en "masonry" (empilement façon Pinterest, chaque carte casée dans la piste la moins remplie plutôt qu'alignée en grille rigide) qui contient TOUT le reste : chaque panneau porte un attribut `data-span="1"` ou `"2"` posé par LEUR JS (vérifié en lisant le DOM : le panneau Armament fait 843px = 2 pistes + 1 marge, Shields/Power plant/Coolers/Radar/Life support font chacun 413px = 1 piste, empilés dans la 3e piste). On reproduit ce même PRINCIPE (une colonne, 3 pistes de largeur égale, un algorithme de "masonry" qui case chaque carte selon sa hauteur réelle) plutôt que de recopier des pixels figés qui ne survivraient pas à nos propres données. Voir packMasonry()/blockSpan() dans ships.js pour l'algorithme. "Rien n'est supprimé" (règle absolue de Cripsis) : chaque bloc qui existait déjà — y compris les 2 sans équivalent chez Erkul, Gestion de l'énergie condensée et Carburant & contre-mesures, gardés par Cripsis dès la v12 — reste affiché, seulement replacé dans cette nouvelle disposition à une seule colonne. Correction au passage (constatée sur le DOM réel, contredit un commentaire v13 qui supposait l'inverse sans l'avoir mesuré) : chez Erkul, Radar est bien une carte ÉTROITE (1 piste) rangée avec Shields/Power plant/Coolers/Life support, PAS une carte large à côté de Quantum drive — voir MASONRY_SPAN_OVERRIDE dans ships.js. */ body.view-ships .page{ /* v18 (28 sept. 2026) : ce plafond était fixé à 1900px depuis la v10 (déjà augmenté par rapport aux 1440px des 4 autres onglets, MAIS toujours un nombre fixe, choisi à l'époque sans mesurer l'écran réel de Cripsis). Nouvelles captures envoyées : sur son moniteur (visiblement plus large que 1900px — bandeau HUD "IPS N/A" typique d'un écran de jeu ultrawide/large format), un grand vide restait à droite même après le correctif v17 (qui n'avait retiré QUE le plafond intérieur de .ship-app, pas celui-ci, plus extérieur, sur .page lui-même). Message de Cripsis, rectangles rouges à l'appui : « Regarde les capture eux [Erkul] ça prend TOUT l'ecran et nous non ». Plafond retiré ici, UNIQUEMENT pour l'onglet Vaisseaux (les 4 autres onglets gardent 1440px, inchangé, via layout.css) : .page utilise maintenant toute la largeur de l'écran, sans nombre fixe à deviner/re-deviner à chaque nouveau moniteur signalé. Sûr grâce au correctif v17 déjà en place : packMasonry() (js/ships.js) fait déjà grandir le nombre de pistes avec la largeur réelle du conteneur pour garder chaque piste proche de 413-450px (la largeur mesurée chez Erkul) au lieu de laisser une seule piste s'étirer sans limite — vérifié explicitement jusqu'à 3440px de large (voir vérifications dans cargo-loop-contexte.md, section v18). */ max-width:none; } .ship-app{ display:flex;flex-direction:column;gap:16px; /* v17 (28 sept. 2026) : ce plafond était fixé à 1272px (largeur exacte de .dash-content mesurée chez Erkul), mais Erkul REMPLIT quand même tout l'écran de Cripsis grâce à sa propre colonne de navigation à gauche (~200-250px, jamais reproduite chez nous — notre barre d'onglets en haut joue ce rôle à la place) : leur page TOTALE est donc plus large que leurs seules 1272px de contenu, alors que la nôtre, sans cette colonne, se retrouvait limitée à 1272px pile, laissant un grand vide visible de chaque côté sur un écran large (~1900px, capture envoyée par Cripsis comparant le plein écran d'Erkul au nôtre). Plafond retiré ici : .ship-app utilise maintenant toute la largeur laissée par .page (déjà plafonnée à 1900px juste au-dessus, pour cet onglet seulement) — packMasonry() (js/ships.js) calcule maintenant lui-même un nombre de pistes qui grandit avec la largeur réelle, pour que chaque piste garde une largeur proche de celle mesurée chez Erkul (413px) plutôt que de s'étirer sans limite. */ margin:0 auto; } .ship-app>*{min-width:0} #shipHeader{display:flex;flex-direction:column;gap:12px} /* Rangée Dégâts/Défense/Coque : 3 colonnes ÉGALES (façon `.dash-center` d'Erkul), jamais côte à côte avec d'autres blocs, jamais empilées avant 900px de large — jusque-là chaque bloc garde sa propre grille interne, donc reste dense même en 2 colonnes. v19 (30 sept. 2026) : cette règle ne donne plus que la valeur par défaut/de repli (3 pistes, le cas le plus courant, 860-1700px de large utile) — packMasonry() (js/ships.js) pose maintenant un style en ligne qui la remplace dès que le nombre RÉEL de pistes de la maçonnerie dépasse 3 (ce bloc porte data-span-fill="true" : il s'étire toujours sur la totalité des pistes disponibles, pour ne plus jamais en laisser une seule orpheline sur un écran large — voir le commentaire dans packMasonry()). En dessous de 3 pistes, l'override est effacé et la media query ci-dessous reprend la main normalement. */ .ship-app-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start} @media (max-width:900px){ .ship-app-top{grid-template-columns:1fr} /* v19 : sans ce reset, .stats-col3{grid-column:3/-1} (plus bas) demande toujours la piste 3, qui n'existe plus dans cette grille à 1 seule piste explicite — la grille en créait alors une implicite pour l'accueillir (comportement CSS normal, mais pas voulu ici), cassant l'empilement mobile en 2 pistes inégales au lieu d'une seule. auto laisse .stats-col3 se placer normalement à la suite de Dégâts/Défense dans l'unique piste, comme avant la v19. */ .ship-app-top .stats-col3{grid-column:auto} } /* v15 (28 sept. 2026) : 3e piste de la rangée du haut — empile Coque, puis Actions/Répartition par composant/Vol condensé, exactement l'ordre Hull → Actions → Power Management → Flight mesuré sur le DOM réel d'erkul.games/calculator (voir le commentaire v15 dans ships.js, renderShip()). Simple flux normal (aucun positionnement JS ici, contrairement à .ship-app-masonry) : ces 4 blocs ne bougent jamais indépendamment les uns des autres, un espacement vertical fixe suffit — même principe que .sum-group{margin-bottom:14px} plus bas, répété ici pour couvrir aussi le .ship-block "Coque" (qui n'a pas la classe .sum-group et n'a donc pas cette marge par défaut). */ .stats-col3{display:flex;flex-direction:column;grid-column:3 / -1} .stats-col3>*{margin-bottom:14px} .stats-col3>*:last-child{margin-bottom:0} /* grid-column:3/-1 (v19, 30 sept. 2026) : Dégâts et Défense (les 2 premiers enfants de .ship-app-top) restent chacun sur 1 seule piste, auto-placés normalement — c'est .stats-col3 (3e enfant) qui absorbe désormais TOUTES les pistes en plus quand packMasonry() en ajoute (voir data-span-fill dans js/ships.js) : "-1" désigne toujours la dernière piste de la grille, quel que soit leur nombre total, donc cette règle n'a besoin d'aucun ajustement si ce nombre change encore à l'avenir. À exactement 3 pistes (le cas par défaut ci-dessus), 3/-1 ne couvre que la 3e piste — comportement strictement identique à avant cette règle (aucune régression). */ /* Zone masonry : positionnement en absolu posé par packMasonry() (ships.js), qui mesure la vraie hauteur de chaque carte et la case dans la piste la moins remplie — voir ce commentaire plus haut pour le principe. .masonry-stacked est le repli petit écran (packMasonry() désactive le positionnement absolu sous ~560px de conteneur utile) : simple empilement en flux normal, une carte par ligne, pleine largeur. */ .ship-app-masonry{position:relative} .ship-app-masonry:not(.masonry-stacked)>*{position:absolute;margin:0 !important;max-width:none} .ship-app-masonry.masonry-stacked{display:flex;flex-direction:column;gap:16px} /* Barre de recherche compacte en tête de la colonne gauche (façon Erkul : recherche + variantes au-dessus de l'identité du vaisseau, dans la même colonne, pas dans une zone séparée). */ .ship-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:12px} .ship-toolbar .field{flex:1;min-width:0;margin-bottom:0} .ship-toolbar .status{text-align:left;min-height:0} .ship-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden} .ship-head{display:flex;flex-wrap:wrap;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)} .ship-img{width:130px;max-width:100%;height:auto;border-radius:6px;object-fit:cover;background:var(--panel-2)} /* flex:0 1 auto (11 oct. 2026, correctif du même jour que l'ajout des pastilles/de la description ci-dessous) : était flex:1 (grandit pour remplir tout l'espace dispo) depuis l'origine de ce bloc — invisible tant que .ship-id était le DERNIER élément de la rangée (rien après lui pour révéler l'espace vide qu'il réservait). Depuis l'ajout de .ship-desc juste après (même rangée, lui aussi flex:1), les deux se partageaient l'espace restant 50/50 : .ship-id s'étirait bien au-delà du nom/des pastilles, repoussant le paragraphe de présentation très loin à droite avec un grand vide entre les deux (capture de Cripsis, 11 oct. 2026, « Notre rendu a rien à voir »). flex:0 1 auto : la colonne identité ne prend que la largeur de son contenu (nom/pastilles), .ship-desc (toujours flex:1 1 280px) absorbe seul l'espace restant, directement à sa suite. */ .ship-id{flex:0 1 auto;min-width:220px;max-width:320px} .ship-id h2{font-family:var(--display);font-weight:700;font-size:1.4rem;margin:0 0 4px} .ship-sub{margin:0 0 6px;color:var(--muted)} /* Pastilles taille/carrière/rôle/équipage sous le nom (11 oct. 2026, façon Erkul : "S2 · Combat · Medium Fighter · 1 crew"), et paragraphe de présentation à côté de l'identité — voir le commentaire au-dessus de leur construction dans renderShip() (ships.js) pour la source des données (déjà dans la réponse API, simplement pas affichée avant). Pastilles neutres (fond panel-2) sauf la taille, en ambre plein comme les autres badges "taille" du site (.part-size-badge) pour rester reconnaissable au premier coup d'oeil. */ .ship-id-badges{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px} .ship-id-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px; background:var(--panel-2);border:1px solid var(--line);color:var(--muted); font-size:.74rem;font-weight:600;white-space:nowrap} .ship-id-badge-size{background:var(--amber);border-color:var(--amber);color:var(--amber-ink); font-family:var(--display)} .ship-desc{flex:1 1 280px;min-width:220px;margin:0;align-self:center;color:var(--muted); font-size:.86rem;line-height:1.45} /* Emplacements de configuration (26 sept. 2026, façon Erkul) : rangée de 4 boutons + un bouton de réinitialisation globale, au-dessus de l'identité du vaisseau (même emplacement que chez Erkul). Volontairement discret (fond neutre) sauf l'emplacement actif (bordure ambre, comme le reste du site pour "en cours"/"sélectionné") et les emplacements personnalisés (petit point ambre, pour les repérer sans avoir à cliquer dessus un par un). */ .ship-loadout-slots{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line)} .slot-btn{position:relative;padding:5px 10px;border-radius:5px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:0.85rem;cursor:pointer} .slot-btn:hover{border-color:var(--amber);color:var(--ink)} .slot-btn.is-active{border-color:var(--amber);color:var(--amber);background:var(--panel)} .slot-btn.has-data:not(.is-active)::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--amber)} .slot-reset-btn{margin-left:auto;font-size:0.8rem} @media (max-width:420px){ .slot-reset-btn{margin-left:0;width:100%} } /* Paire fixe à 2 colonnes (Dégâts/Défense côte à côte en haut de la colonne gauche, v10) : colonnes fixes 1fr/1fr plutôt qu'une grille auto-fit à largeur minimale — dans une colonne gauche déjà étroite (~380px), un auto-fit(220px) désempilerait la paire à la moindre réduction de largeur ; ici on veut qu'elle reste toujours côte à côte (validé sur la maquette statique à 1024/1300px). */ .pair-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media (max-width:420px){ .pair-row{grid-template-columns:1fr} } /* Chaque bloc est un panneau technique à part entière (bordure propre, fond légèrement distinct), plutôt que des sections empilées séparées par un simple filet — c'est ce qui donne l'impression de "panneaux" façon logiciel plutôt que de sections de page web. */ .ship-block{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px 12px} .ship-block.wide{grid-column:1/-1} /* En-tête de panneau compact : icône + titre + bouton replier/déplier (voir blockHead() dans ships.js). Remplace le simple

. */ .block-head{display:flex;align-items:center;gap:7px;margin:0 0 8px} .block-head h3{font-family:var(--display);font-weight:600;font-size:.98rem;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .block-icon{flex:none;width:15px;height:15px;color:var(--amber);display:inline-flex} .block-icon svg{width:100%;height:100%;display:block} .block-toggle{flex:none;background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;font-size:.85rem;line-height:1} .block-toggle:hover{color:var(--ink)} .block-toggle .chev{display:inline-block;transition:transform .12s} .ship-block.collapsed .block-body{display:none} .ship-block.collapsed .block-toggle .chev{transform:rotate(-90deg)} .ship-kpis{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:6px} .kpi{display:flex;flex-direction:column;gap:2px} .kpi-label{font-size:.75rem;color:var(--muted)} .kpi-val{font-family:var(--display);font-weight:700;font-size:1.15rem} .ship-weapons,.ship-parts{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:10px} .ship-weapons th,.ship-parts th{text-align:left;font-weight:500;color:var(--muted);font-size:.78rem;padding:2px 8px 4px} .ship-weapons td,.ship-parts td{padding:8px;border-top:1px solid var(--line);vertical-align:top} .ship-weapons th.r,.ship-weapons td.r,.ship-parts th.r,.ship-parts td.r{text-align:right;white-space:nowrap} .ship-weapons th:first-child,.ship-weapons td:first-child,.ship-parts th:first-child,.ship-parts td:first-child{padding-left:0} .ship-parts td.r{padding-top:12px} .ship-note{margin:10px 0 0;font-size:.85rem;color:var(--muted)} /* Info-bulle (Tooltip) compacte : remplace un paragraphe explicatif toujours visible par une petite icône que l'on survole/active au clavier — le texte complet reste identique (rien n'est supprimé), juste replié derrière un point d'interrogation façon logiciel plutôt qu'affiché en permanence et gonflant la hauteur du panneau. Utilise l'attribut title natif du navigateur (déjà le mécanisme employé par .gamever ailleurs dans ships.js) : pas de nouveau composant JS à maintenir. */ .info-tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px; border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:.68rem; font-family:var(--display);line-height:1;cursor:help;flex:none;margin-left:3px;vertical-align:middle} .info-tip:hover,.info-tip:focus-visible{border-color:var(--amber);color:var(--amber)} /* Sous-titre à l'intérieur d'un bloc (ex. "Segments d'énergie" / "Segments de refroidissement" dans le bloc Énergie, "Parties détachables" dans le bloc Coque) — plusieurs sous-sections dans un même ship-block, nouveau depuis le tableau de bord façon Erkul (v5, 24 sept. 2026). */ .ship-subhead{font-family:var(--display);font-weight:600;font-size:.95rem;margin:14px 0 8px;color:var(--muted)} .ship-block .ship-subhead:first-child{margin-top:0} /* Tableau défilable (liste des parties détachables de la coque, potentiellement longue) : évite qu'un bloc "Coque" avec un vaisseau à beaucoup de pièces (ex. 23 sur le Gladius) n'étire toute la grille verticalement. */ .ship-scroll-table{max-height:260px;overflow-y:auto} /* Configurateur : bouton "échanger" par point d'ancrage (1re colonne du tableau, ouvre la popup), et bouton de réinitialisation aligné avec les indicateurs quand le loadout a été modifié — .reset-part-btn est utilisé pour les 5 catégories (armes, boucliers, refroidisseurs, générateurs, propulseurs quantiques). */ .part-swap-btn{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px 7px;width:100%;max-width:320px; background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:6px; padding:7px 10px;font-size:.86rem;font-family:inherit;cursor:pointer;text-align:left} .part-swap-btn:hover:not(:disabled){border-color:var(--amber)} .part-swap-btn:disabled{opacity:.55;cursor:default} .ship-kpis{align-items:center} .ship-kpis .reset-part-btn{margin-left:auto} /* Grille de "cartes" de composant façon Erkul (armes, bouclier, refroidisseur, générateur, propulseur quantique, radar) — v6 (24 sept. 2026), remplace l'ancien tableau .ship-parts pour ces 6 catégories. Redessinée v11 (24 sept. 2026, sur demande explicite de Cripsis après qu'il nous a montré la vignette "Life support" d'Erkul en capture) : une seule rangée d'en-tête (badges+nom+fabricant à gauche, gros chiffre+légende à droite) au lieu de deux rangées empilées — plus dense, plus proche de la disposition réelle d'Erkul, toujours avec la charte du site (panel/amber), pas ses couleurs. Le tableau .ship-parts reste utilisé ailleurs (parties détachables de la coque, propulseurs) où une vraie liste tabulaire reste plus lisible qu'une grille de cartes. */ .parts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:8px;margin-top:8px;align-items:start} /* minmax 185px -> 205px (v11) : la nouvelle en-tête à une rangée doit loger badges + nom + fabricant ET le gros chiffre côte à côte ; avec 3 badges (taille+classe+grade, cas des boucliers/refroidisseurs/etc.) 185px ne laissait presque plus rien au nom (tronqué à 2-3 lettres). auto-fill -> auto-fit (v11) : un bloc qui n'a qu'1 ou 2 pièces (bouclier, générateur, propulseur quantique...) réservait quand même 3 colonnes fantômes vides dans un bloc large, écrasant la vraie carte à 205px et tronquant le nom à "Sh…" malgré toute la place disponible à côté ; auto-fit supprime les colonnes vides et laisse la ou les cartes réelles se partager toute la largeur. Sans effet quand le bloc a déjà assez de pièces pour remplir ses colonnes (armes) ; align-items:start (déjà utilisé ailleurs pour la même raison, voir .ship-overview) : filet de sécurité pour qu'une carte plus courte qu'une voisine sur la même rangée ne soit jamais étirée en hauteur par la grille — évite de recréer les "grandes cartes vides". */ .part-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 34px 6px 10px; display:flex;flex-direction:column;gap:2px;min-width:0} /* padding-right porté à 34px (26 sept. 2026, corrigé après test en direct) : le bouton .part-power-btn est positionné en absolu dans ce coin — sans cette marge réservée, il recouvrait la fin du gros chiffre principal (ex. "1 266" DPS devenait "1 26" + le bouton par dessus le dernier chiffre). */ /* min-width:0 ci-dessus : sans ça, un item de grille CSS garde sa largeur de contenu minimale ("min-width:auto" par défaut) même quand sa piste de grille est plus étroite — piège du même genre que le fameux overflow-x/overflow-y (voir plus haut dans ce fichier). Conséquence concrète repérée en testant la v11 : un nom d'arme long ("Revenant Gatling") forçait la carte à s'élargir au-delà de sa piste de 185px, et le gros chiffre à droite débordait, rogné, sur la carte voisine au lieu de forcer le nom à tronquer avec l'ellipse déjà prévue pour ça. */ /* Toute la carte cliquable (24 sept. 2026) : le