/* ════════════════════════════════════════════════════════════════
   SGC — QG / Système d'Alliance · « L'Héritage d'Atlantis »
   Refonte visuelle RADICALE. Override chargé APRÈS sgc-sections.css.
   Scope strict `.app .al-layout` (sgc-sections.css non édité = réversible).
   Direction : salle de contrôle des Anciens — panneaux à coins biseautés
   (clip-path octogonal), plaques holographiques, cyan abyssal + or ancien.
   ════════════════════════════════════════════════════════════════ */

.app .al-layout{
  --al-abyss:#03101d; --al-abyss2:#061b2e; --al-deep:#0a2740;
  --al-cyan:#5fe3ff; --al-cyan-soft:#9af0ff; --al-cyan-dim:#1f86ad;
  --al-gold:#ffcf73; --al-gold-soft:#ffe6b0;
  --al-ink:#e6f7ff; --al-mid:#9dc6da; --al-soft:#5f879b;
  --al-line:rgba(95,227,255,0.30);
  --al-line-2:rgba(95,227,255,0.6);
  --al-gold-line:rgba(255,207,115,0.5);
  --al-glow:0 0 28px rgba(95,227,255,0.20);
  --al-glow-gold:0 0 26px rgba(255,207,115,0.28);
  /* coin biseauté « tech ancienne » */
  --al-notch:14px;
  --al-clip:polygon(var(--al-notch) 0,100% 0,100% calc(100% - var(--al-notch)),calc(100% - var(--al-notch)) 100%,0 100%,0 var(--al-notch));
  --al-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%235fe3ff' stroke-opacity='0.06'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z'/%3E%3Cpath d='M28 56l24 14v28'/%3E%3Cpath d='M28 56L4 70v28'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Ambiance : abysse + résille hexagonale + balayage scan ─────── */
.app .al-layout{
  background:
    radial-gradient(ellipse at 50% -8%,rgba(95,227,255,0.12),transparent 58%),
    /* overlay renforcé (0.72/0.55 → 0.85/0.78) : assombrit l'image de fond pour la
       lisibilité de tout le menu alliance + sous-menus (31/05/2026). */
    linear-gradient(180deg,rgba(3,16,29,0.85),rgba(6,27,46,0.78) 70%),
    url('../img/alliance-bg.png.webp') center / cover no-repeat,
    linear-gradient(180deg,var(--al-abyss2),var(--al-abyss) 70%);
  background-color: var(--al-abyss);
}
.app .al-layout .al-body{ position:relative; }
.app .al-layout .al-body::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--al-hex); background-size:56px 100px; opacity:.55;
  mask-image:linear-gradient(180deg,#000,transparent 80%);
}
.app .al-layout .al-body::after{
  content:''; position:absolute; left:0; right:0; top:0; height:120px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(95,227,255,0.10),transparent);
  animation:alScan 7s ease-in-out infinite;
}
@keyframes alScan{ 0%,100%{transform:translateY(-30px);opacity:.4} 50%{transform:translateY(40px);opacity:.9} }
.app .al-layout .al-body > *{ position:relative; z-index:1; }

/* ── Barre d'onglets : sélecteur de console segmenté ───────────── */
.app .al-layout .al-tab-bar{
  background:linear-gradient(180deg,rgba(3,16,29,0.96),rgba(6,27,46,0.92));
  border-bottom:1px solid var(--al-line); gap:6px;
}
.app .al-layout .al-tab-pill{
  font-family:var(--font-display); letter-spacing:3px; font-size:var(--fs-sm);
  color:var(--al-soft); background:rgba(95,227,255,0.05);
  border:1px solid var(--al-line); border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .2s,background .2s,box-shadow .2s,transform .2s;
}
.app .al-layout .al-tab-pill:hover{ color:var(--al-cyan-soft);background:rgba(95,227,255,0.12);transform:translateY(-2px);filter:none; }
.app .al-layout .al-tab-pill.active,
.app .al-layout .al-tab-pill[data-tab].active{
  color:#04131d; border-color:transparent;
  background:linear-gradient(135deg,var(--al-cyan),var(--al-cyan-dim));
  box-shadow:var(--al-glow); text-shadow:none;
}
.app .al-layout .al-tab-pill[data-tab="wars"].active{ background:linear-gradient(135deg,#ff8a6e,#c0432b);color:#1d0a06; }
.app .al-layout .al-tab-pill[data-tab="diplo"].active{ background:linear-gradient(135deg,#7af0c0,#149e74);color:#03140e; }
.app .al-layout .al-tab-pill[data-tab="rankings"].active{ background:linear-gradient(135deg,var(--al-gold),var(--al-gold-soft));color:#1d1405;box-shadow:var(--al-glow-gold); }

/* ── HERO : bandeau de commandement ────────────────────────────── */
.app .al-layout .alhq-header{
  clip-path:var(--al-clip);
  background:
    radial-gradient(circle at 8% 30%,rgba(95,227,255,0.22),transparent 42%),
    radial-gradient(circle at 100% 0%,rgba(255,207,115,0.12),transparent 45%),
    linear-gradient(135deg,var(--al-deep),var(--al-abyss2) 70%);
  border:1px solid var(--al-line-2); border-radius:0;
  padding:26px 30px; margin-bottom:18px;
  box-shadow:var(--al-glow),inset 0 1px 0 rgba(154,240,255,0.18);
  position:relative; overflow:hidden;
}
.app .al-layout .alhq-header::before{
  content:''; position:absolute; left:-60px; top:50%; width:300px; height:300px;
  transform:translateY(-50%);
  background:conic-gradient(from 0deg,transparent,rgba(95,227,255,0.16),transparent 40%);
  animation:alSpin 22s linear infinite; pointer-events:none;
}
@keyframes alSpin{ to{transform:translateY(-50%) rotate(360deg)} }
.app .al-layout .alhq-hdr-icon{
  font-size:46px; width:84px; height:84px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(95,227,255,0.18),transparent 70%);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  border:1px solid var(--al-line-2);
  filter:drop-shadow(0 0 16px rgba(95,227,255,0.7));
}
.app .al-layout .alhq-hdr-title{
  font-family:var(--font-display); font-size:24px; font-weight:900;
  color:var(--al-ink); letter-spacing:5px; text-transform:uppercase;
  text-shadow:0 0 22px rgba(95,227,255,0.5);
}
.app .al-layout .alhq-hdr-coords{ color:var(--al-cyan);font-family:var(--font-mono);letter-spacing:2px;opacity:.85; }
.app .al-layout .alhq-res-block{
  background:linear-gradient(160deg,rgba(95,227,255,0.10),rgba(3,16,29,0.90));
  border:1px solid var(--al-line); border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  min-width:150px;
}
.app .al-layout .alhq-res-fill{ background:linear-gradient(90deg,var(--al-cyan-dim),var(--al-cyan));box-shadow:0 0 12px rgba(95,227,255,0.6); }
.app .al-layout .alhq-res-label{ color:var(--al-mid);letter-spacing:1px; }

/* ── Ligne de taxe / résumé : modules console ──────────────────── */
.app .al-layout .alhq-tax-row,
.app .al-layout .alhq-gen-info{
  background:linear-gradient(135deg,rgba(255,207,115,0.07),rgba(3,16,29,0.92));
  border:1px solid var(--al-gold-line); border-radius:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.app .al-layout .alhq-sum-item{
  background:linear-gradient(160deg,rgba(95,227,255,0.10),rgba(3,16,29,0.85));
  border:1px solid var(--al-line); border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.app .al-layout .alhq-sum-item:hover{ border-color:var(--al-line-2);box-shadow:var(--al-glow);transform:translateY(-3px); }
.app .al-layout .alhq-sum-item.alhq-sum-active{ border-color:var(--al-gold-line);background:linear-gradient(160deg,rgba(255,207,115,0.14),rgba(3,16,29,0.85)); }
.app .al-layout .alhq-sum-val{ color:var(--al-cyan);font-family:var(--font-display);text-shadow:0 0 10px rgba(95,227,255,0.4); }
.app .al-layout .alhq-sum-active .alhq-sum-val{ color:var(--al-gold);text-shadow:0 0 10px rgba(255,207,115,0.45); }
.app .al-layout .alhq-sum-label{ color:var(--al-soft);letter-spacing:2px;font-size:var(--fs-sm); }
.app .al-layout .alhq-action-btn,
.app .al-layout .alhq-fund-btn,
.app .al-layout .alhq-tax-btn{ font-size:var(--al-fs-label); }

/* ── Plaques de titre de section ───────────────────────────────── */
.app .al-layout .alhq-section-title{
  font-family:var(--font-display); font-size:var(--fs-base); font-weight:900;
  letter-spacing:5px; color:var(--al-cyan); text-transform:uppercase;
  padding:8px 0 10px; display:flex; align-items:center; gap:12px;
  text-shadow:0 0 14px rgba(95,227,255,0.3);
}
.app .al-layout .alhq-section-title::before{
  content:''; width:14px; height:14px; flex:none;
  border:2px solid var(--al-gold); border-right:0; border-bottom:0;
}
.app .al-layout .alhq-section-title::after{
  height:1px; background:linear-gradient(90deg,var(--al-gold-line),var(--al-line),transparent);
  box-shadow:0 0 10px rgba(95,227,255,0.25);
}

/* ── Forces du QG (synthèse ATK/DEF/Garnison, demande CaptainFire 28/05) ── */
.app .al-layout .alhq-force-block {
  margin: 6px 0 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(95,227,255,0.06), rgba(255,200,80,0.04));
  border: 1px solid var(--al-line);
  border-radius:var(--radius-md);
  box-shadow: 0 4px 18px rgba(2,10,20,0.45), inset 0 0 24px rgba(95,227,255,0.04);
}
.app .al-layout .alhq-force-title {
  font-family: var(--font-display); font-size:var(--fs-sm); font-weight: 800;
  letter-spacing: 3px; color: var(--al-gold); text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  text-shadow: 0 0 8px rgba(255,200,80,0.25);
}
.app .al-layout .alhq-force-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.app .al-layout .alhq-force-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius:var(--radius);
  background: rgba(8,18,32,0.55); border: 1px solid var(--al-line);
}
.app .al-layout .alhq-force-ico {
  font-size:var(--fs-2xl); line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 0 6px currentColor);
}
.app .al-layout .alhq-force-atk { color: #ff8a5e; }
.app .al-layout .alhq-force-def { color: #5fe3ff; }
.app .al-layout .alhq-force-units { color: #ffd770; }
.app .al-layout .alhq-force-val {
  font-family: var(--font-mono); font-size: 19px; font-weight: 800;
  color: var(--textbright); line-height: 1.1;
}
.app .al-layout .alhq-force-lbl {
  font-family: var(--font-display); font-size:var(--fs-xs); font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--al-soft); margin-top: 2px;
}
.app .al-layout .alhq-force-breakdown {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--al-line);
  font-family: var(--font-mono); font-size:var(--fs-sm);
  color: var(--al-soft); line-height: 1.6;
}
@media (max-width: 768px) {
  .app .al-layout .alhq-force-stats { grid-template-columns: 1fr; }
}

/* ── Sous-onglets QG : sélecteur segmenté ──────────────────────── */
.app .al-layout .alhq-subtab-bar{ border-bottom:1px solid var(--al-line);gap:6px; }
.app .al-layout .alhq-subtab-pill{
  color:var(--al-soft); letter-spacing:2px; border-bottom:0;
  padding:9px 16px; clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);
  transition:color .18s,background .18s;
}
.app .al-layout .alhq-subtab-pill:hover{ color:var(--al-cyan-soft);background:rgba(95,227,255,0.08); }
.app .al-layout .alhq-subtab-pill.active{
  color:#04131d; background:linear-gradient(135deg,var(--al-cyan),var(--al-cyan-dim));
  box-shadow:0 0 16px rgba(95,227,255,0.4); text-shadow:none;
}

/* ── CARTES BÂTIMENT : grandes plaques de structure ────────────── */
.app .al-layout .alhq-bld-grid{ grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:18px; }
.app .al-layout .alhq-bld-card{
  padding:0 0 16px; text-align:left; border-radius:0; overflow:hidden;
  clip-path:var(--al-clip);
  background:linear-gradient(180deg,rgba(95,227,255,0.05),rgba(3,16,29,0.96));
  border:1px solid var(--al-line);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.app .al-layout .alhq-bld-card::before{ display:none; }
.app .al-layout .alhq-bld-card:hover{
  transform:translateY(-6px);
  border-color:var(--al-line-2); box-shadow:0 18px 40px rgba(2,10,20,0.7),var(--al-glow);
}
.app .al-layout .alhq-bld-card.alhq-selected{
  border-color:var(--al-cyan);
  box-shadow:0 0 0 1px var(--al-cyan),var(--al-glow);
}
.app .al-layout .alhq-bld-card.alhq-building{ border-color:var(--al-gold-line); }
/* bandeau « viewport » illustration en tête de carte */
.app .al-layout .alhq-bld-ico{
  width:100%; height:112px; margin:0 0 12px; font-size:52px;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg,rgba(95,227,255,0.05) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% 40%,rgba(95,227,255,0.22),transparent 70%),
    linear-gradient(180deg,var(--al-deep),rgba(3,16,29,0.9));
  border-bottom:1px solid var(--al-line);
  filter:drop-shadow(0 4px 12px rgba(95,227,255,0.35));
  position:relative;
}
.app .al-layout .alhq-bld-ico::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(154,240,255,0.12) 50%,transparent 60%);
}
.app .al-layout .alhq-bld-ico.has-illus{
  background-size:cover; background-repeat:no-repeat; background-position:center;
  background-color:var(--al-abyss2); font-size:0;
  border-bottom:1px solid var(--al-line-2);
}
.app .al-layout .alhq-bld-card.alhq-building .alhq-bld-ico{
  background:
    radial-gradient(circle at 50% 40%,rgba(255,207,115,0.22),transparent 70%),
    linear-gradient(180deg,#23180a,rgba(3,16,29,0.9));
  border-bottom-color:var(--al-gold-line);
}
.app .al-layout .alhq-bld-name{
  color:var(--al-ink); font-family:var(--font-body); font-size:var(--fs-md); font-weight:700;
  letter-spacing:.5px; padding:0 16px; margin-bottom:8px; min-height:0; text-align:left;
}
.app .al-layout .alhq-bld-lv{
  display:inline-block; margin:0 16px; padding:3px 12px;
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:900; letter-spacing:1.5px;
  color:var(--al-gold); background:rgba(255,207,115,0.10);
  border:1px solid var(--al-gold-line);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  text-shadow:0 0 8px rgba(255,207,115,0.4);
}
.app .al-layout .alhq-bld-card.alhq-locked{ opacity:.5;filter:grayscale(.55); }
.app .al-layout .alhq-bld-lock{ top:10px;right:10px;font-size:var(--fs-md);opacity:.85; }
.app .al-layout .alhq-bld-prereq{ padding:6px 16px 0;color:var(--al-soft);font-size:var(--fs-xs); }
.app .al-layout .alhq-bld-prog{ background:rgba(3,16,29,0.92); }
.app .al-layout .alhq-bld-prog-fill{ background:linear-gradient(90deg,var(--al-gold),var(--al-cyan)); }

/* ── Panneaux (détail / recherche / troupe / etc.) ─────────────── */
.app .al-layout .alhq-detail,
.app .al-layout .alhq-research-card,
.app .al-layout .alhq-troop-card,
.app .al-layout .alhq-shield-info,
.app .al-layout .alhq-beacon-card,
.app .al-layout .alhq-wonder-hero{
  background:linear-gradient(160deg,rgba(95,227,255,0.06),rgba(3,16,29,0.96));
  border:1px solid var(--al-line); border-radius:0;
  clip-path:var(--al-clip);
  box-shadow:inset 0 1px 0 rgba(154,240,255,0.10);
}
.app .al-layout .alhq-research-card:hover,
.app .al-layout .alhq-troop-card:hover{ border-color:var(--al-line-2);transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,10,20,0.6); }
.app .al-layout .alhq-det-name,
.app .al-layout .alhq-res-name,
.app .al-layout .alhq-troop-name{ color:var(--al-ink);font-family:var(--font-display);letter-spacing:1px; }
.app .al-layout .alhq-det-lv,
.app .al-layout .alhq-res-lv,
.app .al-layout .alhq-troop-stats{ color:var(--al-cyan-soft); }
.app .al-layout .alhq-det-desc{ background:rgba(95,227,255,0.05);border-radius:0;  box-shadow:inset 3px 0 0 0 var(--al-cyan); }
.app .al-layout .alhq-troop-count{ color:var(--al-gold);text-shadow:0 0 12px rgba(255,207,115,0.4); }
.app .al-layout .alhq-cost-fill{ background:linear-gradient(90deg,var(--al-cyan-dim),var(--al-cyan)); }
.app .al-layout .alhq-cost-fill.full{ background:linear-gradient(90deg,#13a877,#5ff0c0); }
.app .al-layout .alhq-res-bonus{ color:#7af0c0;background:rgba(40,220,150,0.08);border-color:rgba(60,220,150,0.25);border-radius:0; }

/* ── Boutons : primaire cyan biseauté, validation or ───────────── */
.app .al-layout .alhq-fund-btn,
.app .al-layout .alhq-action-btn,
.app .al-layout .alhq-train-btn,
.app .al-layout .alhq-res-launch-btn,
.app .al-layout .alhq-tax-btn{
  font-family:var(--font-display); letter-spacing:1.5px; color:var(--al-cyan-soft);
  border:1px solid var(--al-line-2); border-radius:0;
  background:linear-gradient(135deg,rgba(95,227,255,0.16),rgba(95,227,255,0.04));
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:all .2s;
}
.app .al-layout .alhq-fund-btn:hover,
.app .al-layout .alhq-action-btn:hover,
.app .al-layout .alhq-train-btn:hover,
.app .al-layout .alhq-res-launch-btn:hover,
.app .al-layout .alhq-tax-btn:hover{
  color:#04131d; background:linear-gradient(135deg,var(--al-cyan),var(--al-cyan-dim));
  box-shadow:0 6px 22px rgba(95,227,255,0.3); transform:translateY(-2px);
}
.app .al-layout .alhq-upgrade-btn,
.app .al-layout .alhq-found-btn,
.app .al-layout .alhq-res-launch-btn.alhq-primary{
  border:1px solid var(--al-gold); color:#1d1405; border-radius:0;
  background:linear-gradient(135deg,var(--al-gold),var(--al-gold-soft));
  text-shadow:none; box-shadow:var(--al-glow-gold);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.app .al-layout .alhq-upgrade-btn:hover,
.app .al-layout .alhq-found-btn:hover{ background:linear-gradient(135deg,var(--al-gold-soft),#fff1d4);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,207,115,0.45); }
.app .al-layout .alhq-fund-row input{ background:rgba(3,16,29,0.90);border:1px solid var(--al-line);border-radius:0;color:var(--al-ink); }
.app .al-layout .alhq-fund-row input:focus{ border-color:var(--al-cyan);box-shadow:0 0 14px rgba(95,227,255,0.3); }

/* ── Contributions / logs ──────────────────────────────────────── */
.app .al-layout .alhq-contrib-row{
  background:linear-gradient(135deg,rgba(95,227,255,0.05),rgba(3,16,29,0.92));
  border:1px solid var(--al-line); border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);
}
.app .al-layout .alhq-contrib-row:hover{ border-color:var(--al-line-2);background:rgba(95,227,255,0.09); }
.app .al-layout .alhq-contrib-rank{ color:var(--al-gold);text-shadow:0 0 8px rgba(255,207,115,0.4); }
.app .al-layout .alhq-contrib-name{ color:var(--al-ink); }
.app .al-layout .alhq-contrib-val{ color:var(--al-cyan); }
.app .al-layout .alhq-contrib-bar,
.app .al-layout .alhq-contrib-fill{ background:linear-gradient(90deg,var(--al-cyan-dim),var(--al-cyan)); }
.app .al-layout .alhq-log-who{ color:var(--al-cyan-soft); }

/* ── État vide / fondation ─────────────────────────────────────── */
.app .al-layout .alhq-empty{ background:radial-gradient(ellipse at center,rgba(95,227,255,0.12),transparent 70%); }
.app .al-layout .alhq-empty-icon{ filter:drop-shadow(0 0 26px rgba(95,227,255,0.65)); }
.app .al-layout .alhq-empty-title{ color:var(--al-ink);letter-spacing:4px;text-shadow:0 0 22px rgba(95,227,255,0.45); }

/* ── Vitrine Merveille ─────────────────────────────────────────── */
.app .al-layout .alhq-wonder-banner{
  width:100%; height:clamp(340px,40vw,560px); margin:0 0 14px; font-size:84px;
  display:flex; align-items:center; justify-content:center;
  color:var(--al-gold); filter:drop-shadow(0 0 22px rgba(255,207,115,0.5));
  background:
    repeating-linear-gradient(0deg,rgba(95,227,255,0.05) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% 38%,rgba(255,207,115,0.20),transparent 70%),
    linear-gradient(180deg,var(--al-deep),rgba(3,16,29,0.92));
  background-repeat:no-repeat; background-position:center;
  border:1px solid var(--al-gold-line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:var(--al-glow-gold);
}
.app .al-layout .alhq-wonder-banner.has-illus{
  background-size:cover; background-position:center; background-color:var(--al-abyss2); font-size:0;
}
@media (max-width:430px){ .app .al-layout .alhq-wonder-banner{ height:clamp(180px,52vw,300px);font-size:60px; } }
.app .al-layout .alhq-wonder-hero{
  border:1px solid var(--al-gold-line);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,207,115,0.20),transparent 50%),
    linear-gradient(135deg,var(--al-deep),var(--al-abyss2));
  box-shadow:var(--al-glow-gold),inset 0 1px 0 rgba(154,240,255,0.14);
}
.app .al-layout .alhq-wonder-sigil{ font-size:54px;filter:drop-shadow(0 0 20px rgba(255,207,115,0.55)); }
.app .al-layout .alhq-wonder-sigil.has-illus{
  width:104px;height:104px;flex-shrink:0;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:var(--al-abyss2);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  border:1px solid var(--al-gold-line);
}
.app .al-layout .alhq-wonder-bonus2{ font-family:var(--font-display);font-size:18px;font-weight:900;color:var(--al-cyan);text-shadow:0 0 14px rgba(95,227,255,0.4);line-height:1.1;margin-top:2px; }
.app .al-layout .alhq-wonder-tier{ color:var(--al-cyan);letter-spacing:2px; }
.app .al-layout .alhq-wonder-bonus{ color:var(--al-gold);font-family:var(--font-display);text-shadow:0 0 20px rgba(255,207,115,0.5); }

/* ── Membres / cartes génériques ───────────────────────────────── */
.app .al-layout .al-member-card{
  background:linear-gradient(135deg,rgba(95,227,255,0.06),rgba(3,16,29,0.90));
  border:1px solid var(--al-line); border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.app .al-layout .al-member-card:hover{ border-color:var(--al-line-2);box-shadow:var(--al-glow); }
.app .al-layout .al-mc-name{ color:var(--al-ink); }
.app .al-layout .al-mc-pts{ color:var(--al-gold); }

/* ── Profil d'alliance (overlay HORS .app — bloc isolé) ────────── */
#profileOverlay #profileCard,#profileOverlay .ally2-card{
  border-color:var(--al-gold-line);
  box-shadow:0 0 32px rgba(95,227,255,0.16),inset 0 1px 0 rgba(154,240,255,0.12);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:768px){
  .app .al-layout{ --al-notch:10px; }
  .app .al-layout .al-tab-pill{ letter-spacing:1.5px;padding:9px 13px;font-size:var(--fs-xs); }
  .app .al-layout .alhq-header{ padding:18px;flex-direction:column;align-items:flex-start; }
  .app .al-layout .alhq-hdr-title{ font-size:19px;letter-spacing:3px; }
  .app .al-layout .alhq-bld-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px; }
  .app .al-layout .alhq-bld-ico{ height:88px;font-size:40px; }
  .app .al-layout .alhq-wonder-sigil.has-illus{ width:70px;height:70px; }
}
@media (max-width:430px){
  .app .al-layout .alhq-bld-grid{ grid-template-columns:1fr 1fr; }
  .app .al-layout .alhq-section-title{ letter-spacing:3px; }
}

/* ── Accessibilité : reduced-motion ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .app .al-layout .al-body::after,
  .app .al-layout .alhq-header::before{ animation:none; }
  .app .al-layout .al-tab-pill,
  .app .al-layout .alhq-bld-card,
  .app .al-layout .alhq-research-card,
  .app .al-layout .alhq-troop-card,
  .app .al-layout .alhq-sum-item{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN SENIOR — tous les sous-menus QG (typo + composants)
   Échelle de type lisible (plancher 12px), hiérarchie claire,
   cohérence totale avec Infrastructure. Override scopé.
   ════════════════════════════════════════════════════════════════ */
.app .al-layout{
  --al-fs-title:17px; --al-fs-body:14.5px; --al-fs-label:13px;
  --al-fs-data:15px; --al-fs-micro:12px;
  --al-chip:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
/* Contrôles de formulaire : jamais minuscules, police du thème */
.app .al-layout input,
.app .al-layout textarea,
.app .al-layout select{
  font-size:15px !important; font-family:var(--font-mono);
  background:rgba(3,16,29,0.90); border:1px solid var(--al-line);
  border-radius:0; color:var(--al-ink);
}
.app .al-layout input:focus,
.app .al-layout textarea:focus,
.app .al-layout select:focus{ border-color:var(--al-cyan);box-shadow:0 0 14px rgba(95,227,255,0.3);outline:none; }

/* ── Icône → pastille « viewport » encadrée (recherche / troupe) ── */
.app .al-layout .alhq-res-head,
.app .al-layout .alhq-troop-head{ gap:14px;margin-bottom:14px; }
.app .al-layout .alhq-res-ico,
.app .al-layout .alhq-troop-ico{
  font-size:30px; width:54px; height:54px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(95,227,255,0.16),transparent 70%),rgba(3,16,29,0.90);
  border:1px solid var(--al-line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  filter:drop-shadow(0 2px 8px rgba(95,227,255,0.3));
}

/* ── Recherches ────────────────────────────────────────────────── */
.app .al-layout .alhq-res-name{ font-family:var(--font-display);font-size:var(--al-fs-title);font-weight:900;color:var(--al-ink);letter-spacing:1px; }
.app .al-layout .alhq-res-lv{ font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-cyan-soft); }
.app .al-layout .alhq-res-desc{ font-family:var(--font-body);font-size:var(--al-fs-body);color:var(--al-mid);line-height:1.55; }
.app .al-layout .alhq-res-bonus{
  font-family:var(--font-mono);font-size:var(--al-fs-data);font-weight:700;color:#8af3c8;
  background:rgba(40,220,150,0.09);border:1px solid rgba(60,220,150,0.3);border-radius:0;
  clip-path:var(--al-chip);
}
.app .al-layout .alhq-res-cost{
  font-family:var(--font-mono);font-size:var(--al-fs-data);color:var(--al-mid);
  display:flex;flex-wrap:wrap;gap:4px 18px;
}
.app .al-layout .alhq-res-cost span{ color:var(--al-gold);font-weight:700;white-space:nowrap; }
.app .al-layout .alhq-res-status{ font-family:var(--font-display);font-size:var(--al-fs-label);letter-spacing:1.5px;border-radius:0;clip-path:var(--al-chip); }
.app .al-layout .alhq-res-status.building{ color:var(--al-gold);background:rgba(255,207,115,0.10);border:1px solid var(--al-gold-line); }
.app .al-layout .alhq-res-status.maxed{ color:#8af3c8;background:rgba(40,220,150,0.10);border:1px solid rgba(60,220,150,0.3); }
.app .al-layout .alhq-res-launch-btn{
  font-family:var(--font-display);font-size:var(--al-fs-label);letter-spacing:2px;
  border:1px solid var(--al-gold);color:#1d1405;border-radius:0;
  background:linear-gradient(135deg,var(--al-gold),var(--al-gold-soft));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.app .al-layout .alhq-res-launch-btn:hover{ background:linear-gradient(135deg,var(--al-gold-soft),#fff1d4);transform:translateY(-2px);box-shadow:var(--al-glow-gold); }
.app .al-layout .alhq-bonus-summary{
  font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-mid);
  background:linear-gradient(135deg,rgba(40,220,150,0.07),rgba(3,16,29,0.92));
  border:1px solid rgba(60,220,150,0.22);border-radius:0;clip-path:var(--al-chip);
}
.app .al-layout .alhq-bonus-summary strong{ color:#8af3c8; }

/* ── Troupes + caserne ─────────────────────────────────────────── */
.app .al-layout .alhq-troop-name{ font-family:var(--font-display);font-size:var(--al-fs-title);font-weight:900;color:var(--al-ink);letter-spacing:1px; }
.app .al-layout .alhq-troop-stats{ font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-cyan-soft); }
.app .al-layout .alhq-troop-count{ font-family:var(--font-display);font-size:24px;color:var(--al-gold);text-shadow:0 0 12px rgba(255,207,115,0.35); }
.app .al-layout .alhq-troop-desc{ font-family:var(--font-body);font-size:var(--al-fs-body);color:var(--al-mid);line-height:1.55; }
.app .al-layout .alhq-troop-cost{ font-family:var(--font-mono);font-size:var(--al-fs-data);color:var(--al-mid); }
.app .al-layout .alhq-train-status,
.app .al-layout .alhq-troop-cap{
  font-size:var(--al-fs-label);border-radius:0;clip-path:var(--al-chip);
  border:1px solid var(--al-gold-line);
}
.app .al-layout .alhq-troop-cap{ border-color:var(--al-line);color:var(--al-mid); }
.app .al-layout .alhq-train-btn,
.app .al-layout .alhq-max-btn{
  font-family:var(--font-display);font-size:var(--al-fs-label);border-radius:0;
  border:1px solid var(--al-line-2);color:var(--al-cyan-soft);
  background:linear-gradient(135deg,rgba(95,227,255,0.15),rgba(95,227,255,0.04));
  clip-path:var(--al-chip);
}
.app .al-layout .alhq-train-btn:hover,
.app .al-layout .alhq-max-btn:hover{ color:#04131d;background:linear-gradient(135deg,var(--al-cyan),var(--al-cyan-dim)); }

/* ── Garnison ──────────────────────────────────────────────────── */
.app .al-layout .alhq-garrison-owner,
.app .al-layout .alhq-garrison-send{
  background:linear-gradient(135deg,rgba(95,227,255,0.06),rgba(3,16,29,0.90));
  border:1px solid var(--al-line);border-radius:0;clip-path:var(--al-clip);
}
.app .al-layout .alhq-garrison-owner-name{ font-family:var(--font-display);font-size:var(--al-fs-title);color:var(--al-ink); }
.app .al-layout .alhq-garrison-row{ font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-mid); }
.app .al-layout .alhq-garrison-troop{ color:var(--al-cyan-soft);font-weight:700; }
.app .al-layout .alhq-garrison-send-title{ font-family:var(--font-display);font-size:var(--al-fs-label);color:var(--al-cyan);letter-spacing:2px; }
.app .al-layout .alhq-recall-btn{ font-size:var(--fs-base);border:1px solid var(--al-gold-line);color:var(--al-gold);background:rgba(255,207,115,0.08);border-radius:0;clip-path:var(--al-chip); }

/* ── Défense : bouclier + relais ───────────────────────────────── */
.app .al-layout .alhq-shield-stat{ min-width:160px; }
.app .al-layout .alhq-shield-label{ font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-soft);letter-spacing:1.5px; }
.app .al-layout .alhq-shield-val{ font-family:var(--font-display);font-size:21px;color:var(--al-cyan);text-shadow:0 0 10px rgba(95,227,255,0.35); }
.app .al-layout .alhq-shield-iris{ font-family:var(--font-mono);font-size:var(--al-fs-body);color:var(--al-gold);background:rgba(255,207,115,0.08);border:1px solid var(--al-gold-line);border-radius:0;clip-path:var(--al-chip); }
.app .al-layout .alhq-relay-info{
  background:linear-gradient(135deg,rgba(255,207,115,0.06),rgba(3,16,29,0.92));
  border:1px solid var(--al-gold-line);border-radius:0;clip-path:var(--al-clip);
}
.app .al-layout .alhq-relay-stat{ font-family:var(--font-mono);font-size:var(--al-fs-body);color:var(--al-mid); }
.app .al-layout .alhq-relay-stat strong{ color:var(--al-cyan); }
.app .al-layout .alhq-relay-active{ color:var(--al-gold); }

/* ── Balises : gating + quota + cartes ─────────────────────────── */
.app .al-layout .alhq-gate-card{ background:var(--al-card);border:1px solid var(--al-line);border-radius:0;clip-path:var(--al-chip); }
.app .al-layout .alhq-gate-card.ok{ border-color:rgba(60,220,150,0.4); }
.app .al-layout .alhq-gate-card.ko{ border-color:rgba(255,90,90,0.4); }
.app .al-layout .alhq-gate-card-lbl{ font-size:var(--al-fs-label);color:var(--al-ink); }
.app .al-layout .alhq-gate-card-badge{ font-size:var(--al-fs-micro); }
.app .al-layout .alhq-gate-card-val{ font-family:var(--font-mono);font-size:var(--al-fs-data);color:var(--al-ink); }
.app .al-layout .alhq-gate-card.ok .alhq-gate-card-fill{ background:linear-gradient(90deg,#13a877,#5ff0c0); }
.app .al-layout .alhq-quota-card{ background:var(--al-card);border:1px solid var(--al-line);border-radius:0;clip-path:var(--al-chip); }
.app .al-layout .alhq-quota-val{ font-family:var(--font-mono);font-size:var(--al-fs-data);color:var(--al-ink); }
.app .al-layout .alhq-quota-val span{ font-size:var(--al-fs-micro);color:var(--al-soft); }
.app .al-layout .alhq-quota-hint{ font-family:var(--font-body);font-size:var(--al-fs-micro);font-style:normal;color:var(--al-soft); }
.app .al-layout .alhq-beacons-quota{ font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-soft); }
.app .al-layout .alhq-beacon-card{ background:var(--al-card);border:1px solid var(--al-line);border-radius:0;clip-path:var(--al-clip); }
.app .al-layout .alhq-beacon-card.alhq-beacon-enemy{ border-color:rgba(255,90,90,0.4);background:linear-gradient(135deg,rgba(255,90,90,0.06),rgba(3,16,29,0.85)); }
.app .al-layout .alhq-beacon-head{ font-size:var(--al-fs-title); }
.app .al-layout .alhq-beacon-coords,
.app .al-layout .alhq-beacon-hp,
.app .al-layout .alhq-beacon-upkeep{ font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-mid); }

/* ── Conseil : info + rôles + formulaire + MOTD ────────────────── */
.app .al-layout .alhq-council-info{
  font-family:var(--font-mono);font-size:var(--al-fs-body);color:var(--al-mid);
  background:linear-gradient(135deg,rgba(255,207,115,0.07),rgba(3,16,29,0.92));
  border:1px solid var(--al-gold-line);border-radius:0;clip-path:var(--al-clip);
}
.app .al-layout .alhq-council-info strong{ color:var(--al-gold); }
.app .al-layout .alhq-roles-title,
.app .al-layout .alhq-role-form-title{ font-family:var(--font-display);font-size:var(--al-fs-label);color:var(--al-cyan);letter-spacing:2px; }
.app .al-layout .alhq-role-card,
.app .al-layout .alhq-role-form,
.app .al-layout .alhq-motd-form,
.app .al-layout .alhq-motd{
  background:linear-gradient(155deg,rgba(255,207,115,0.06),rgba(3,16,29,0.92));
  border:1px solid var(--al-gold-line);border-radius:0;clip-path:var(--al-clip);
}
.app .al-layout .alhq-role-name{ font-family:var(--font-display);font-size:var(--al-fs-title);color:var(--al-gold); }
.app .al-layout .alhq-role-ico{ font-size:var(--fs-2xl); }
.app .al-layout .alhq-role-perms{ font-family:var(--font-body);font-size:var(--al-fs-label);color:var(--al-mid);line-height:1.5; }
.app .al-layout .alhq-role-edit,
.app .al-layout .alhq-role-del{ font-size:var(--fs-lg);border-radius:0; }
.app .al-layout .alhq-role-ico-btn{ font-size:18px;border:1px solid var(--al-line);border-radius:0;background:rgba(3,16,29,0.5); }
.app .al-layout .alhq-role-ico-btn.active{ border-color:var(--al-cyan);background:rgba(95,227,255,0.15); }
.app .al-layout .alhq-perm-check{ font-family:var(--font-body);font-size:var(--al-fs-label);color:var(--al-mid); }
.app .al-layout .alhq-motd{ font-family:var(--font-body);font-size:var(--al-fs-body);color:var(--al-mid); }
.app .al-layout .alhq-motd-label{ color:var(--al-cyan);letter-spacing:1.5px; }

/* ── Zone dynamique : contributions / logs ─────────────────────── */
.app .al-layout .alhq-contrib-name{ font-family:var(--font-mono);font-size:var(--al-fs-data); }
.app .al-layout .alhq-contrib-val{ font-family:var(--font-mono);font-size:var(--al-fs-data); }
.app .al-layout .alhq-contrib-rank{ font-size:var(--al-fs-data); }
.app .al-layout .alhq-log-row{ font-family:var(--font-mono);font-size:var(--al-fs-label); }
.app .al-layout .alhq-log-when,
.app .al-layout .alhq-log-detail{ font-size:var(--al-fs-label);color:var(--al-soft); }
.app .al-layout .alhq-log-action{ color:var(--al-ink); }
.app .al-layout .alhq-empty-desc,
.app .al-layout .alhq-empty-hint{ font-family:var(--font-body);font-size:var(--al-fs-body);color:var(--al-mid);line-height:1.6; }

/* ════════════════════════════════════════════════════════════════
   FINITION PREMIUM — modules ressources (hero) + jauges de coût
   (textes plus lisibles/lumineux, barres = vraies jauges HUD)
   ════════════════════════════════════════════════════════════════ */
@keyframes alSheen{ 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(320%)} }

/* Modules ressources du hero : vraie tuile-jauge */
.app .al-layout .alhq-res-block{
  min-width:178px; padding:13px 16px 14px;
  background:linear-gradient(165deg,rgba(95,227,255,0.12),rgba(3,16,29,0.85));
  border:1px solid var(--al-line-2);
  box-shadow:inset 0 1px 0 rgba(154,240,255,0.14);
}
.app .al-layout .alhq-res-label{
  font-family:var(--font-mono); font-size:var(--fs-lg); font-weight:700;
  color:var(--al-ink); margin-bottom:9px; letter-spacing:.3px;
  display:flex; align-items:center; gap:7px;
  text-shadow:0 0 10px rgba(95,227,255,0.25);
}
.app .al-layout .alhq-res-label img,
.app .al-layout .alhq-res-label svg{ filter:drop-shadow(0 0 5px rgba(95,227,255,0.5)); }
.app .al-layout .alhq-res-bar{
  height:9px; background:rgba(3,16,29,0.85); border-radius:0;
  box-shadow:inset 0 1px 3px var(--shade-5),inset 0 0 0 1px rgba(95,227,255,0.10);
  overflow:hidden; position:relative;
}
.app .al-layout .alhq-res-fill{
  background:linear-gradient(90deg,var(--al-cyan-dim),var(--al-cyan));
  box-shadow:0 0 14px rgba(95,227,255,0.65); position:relative; border-radius:0;
}
.app .al-layout .alhq-res-fill::after{
  content:''; position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);
  animation:alSheen 3.6s ease-in-out infinite;
}
.app .al-layout .alhq-res-block.overcap{ border-color:var(--al-gold-line); }
.app .al-layout .alhq-res-block.overcap .alhq-res-fill{ background:linear-gradient(90deg,var(--al-gold),var(--al-gold-soft));box-shadow:0 0 14px rgba(255,207,115,0.6); }
.app .al-layout .alhq-res-over{ color:var(--al-gold);font-weight:700; }

/* Sous-titre « PALIER SUIVANT … » : vrai intertitre, plus gris minus */
.app .al-layout .alhq-det-cost-title{
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  letter-spacing:2.5px; color:var(--al-cyan); text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin:4px 0 12px;
  text-shadow:0 0 12px rgba(95,227,255,0.3);
}
.app .al-layout .alhq-det-cost-title::before{
  content:''; width:18px; height:2px; flex:none;
  background:linear-gradient(90deg,var(--al-gold),transparent); box-shadow:0 0 8px var(--al-gold);
}

/* Jauges de coût (Merveille / détail bâtiment) : meter premium */
.app .al-layout .alhq-cost-row{ gap:12px;font-family:var(--font-mono);font-size:var(--al-fs-data);margin:3px 0; }
.app .al-layout .alhq-cost-bar{
  height:11px; background:rgba(3,16,29,0.85); border-radius:0;
  box-shadow:inset 0 1px 3px var(--shade-5),inset 0 0 0 1px rgba(95,227,255,0.10);
  overflow:hidden;
}
.app .al-layout .alhq-cost-fill{
  background:linear-gradient(90deg,var(--al-cyan-dim),var(--al-cyan));
  box-shadow:0 0 12px rgba(95,227,255,0.55); position:relative; border-radius:0;
}
.app .al-layout .alhq-cost-fill::after{
  content:''; position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:alSheen 3.6s ease-in-out infinite;
}
.app .al-layout .alhq-cost-fill.full{ background:linear-gradient(90deg,#13a877,#5ff0c0);box-shadow:0 0 12px rgba(40,220,150,0.5); }
.app .al-layout .alhq-cost-nums{
  font-family:var(--font-mono); font-size:14.5px; font-weight:700;
  color:var(--al-ink); min-width:auto; letter-spacing:.3px;
}
.app .al-layout .alhq-cost-nums.full{ color:#7af0c0; }

/* Descriptions Merveille : lisibles, pas gris terne */
.app .al-layout .alhq-wonder-desc{ font-family:var(--font-body);font-size:var(--al-fs-body);color:var(--al-mid);line-height:1.6; }
.app .al-layout .alhq-wonder-sub{ font-size:var(--al-fs-label);color:var(--al-cyan-soft); }
.app .al-layout .alhq-src-label{
  font-family:var(--font-mono);font-size:var(--al-fs-label);color:var(--al-mid);
  background:rgba(95,227,255,0.05);border:1px solid var(--al-line);border-radius:0;
}

@media (prefers-reduced-motion:reduce){
  .app .al-layout .alhq-res-fill::after,
  .app .al-layout .alhq-cost-fill::after{ animation:none;display:none; }
}

/* ════════════════════════════════════════════════════════════════
   COCKPIT BASE-BUILDER — Infrastructure : rail de structures (gauche)
   + grand panneau détail vivant (droite). CSS-only sur markup wrapper.
   ════════════════════════════════════════════════════════════════ */
.app .al-layout .alhq-cockpit{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:18px; align-items:start; margin-bottom:18px;
  animation:alFadeIn .35s ease both;
}
@keyframes alFadeIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* Rail = liste verticale de structures, cartes compactes */
.app .al-layout .alhq-cockpit-rail .alhq-bld-grid{
  display:flex; flex-direction:column; gap:8px; margin:0;
}
.app .al-layout .alhq-cockpit-rail .alhq-bld-card{
  display:flex; align-items:center; gap:13px; padding:11px 14px;
  text-align:left; clip-path:var(--al-chip);
}
.app .al-layout .alhq-cockpit-rail .alhq-bld-card:hover{ transform:translateX(3px); }
.app .al-layout .alhq-cockpit-rail .alhq-bld-ico{
  width:46px; height:46px; margin:0; font-size:24px; flex:none;
  border:1px solid var(--al-line); border-bottom:1px solid var(--al-line);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.app .al-layout .alhq-cockpit-rail .alhq-bld-ico::after{ display:none; }
.app .al-layout .alhq-cockpit-rail .alhq-bld-name{ flex:1;padding:0;margin:0;font-size:var(--fs-md); }
.app .al-layout .alhq-cockpit-rail .alhq-bld-lv{ margin:0; }
.app .al-layout .alhq-cockpit-rail .alhq-bld-prereq{ flex-basis:100%;padding:4px 0 0; }
.app .al-layout .alhq-cockpit-rail .alhq-bld-card.alhq-selected{
  border-color:var(--al-cyan); box-shadow:0 0 0 1px var(--al-cyan),var(--al-glow);
}
.app .al-layout .alhq-cockpit-rail .alhq-bld-lock{ position:static;margin-left:auto; }

/* Panneau détail vivant (droite) : grand bandeau d'art + données */
.app .al-layout .alhq-cockpit-panel{ position:sticky; top:8px; }
.app .al-layout .alhq-cockpit-panel .alhq-detail{ margin:0; }
.app .al-layout .alhq-cockpit-panel .alhq-det-header{
  flex-direction:column; align-items:stretch; gap:0; margin-bottom:16px;
}
.app .al-layout .alhq-cockpit-panel .alhq-det-ico{
  width:100%; height:clamp(220px,26vw,400px); font-size:64px;
  display:flex; align-items:center; justify-content:center; margin:0 0 14px;
  background:
    repeating-linear-gradient(0deg,rgba(95,227,255,0.05) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% 40%,rgba(95,227,255,0.22),transparent 70%),
    linear-gradient(180deg,var(--al-deep),rgba(3,16,29,0.92));
  background-repeat:no-repeat; background-position:center;
  border:1px solid var(--al-line-2);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  filter:drop-shadow(0 4px 14px rgba(95,227,255,0.3));
}
/* illus 3:2 dans un cadre 3:2 → remplit tout (cover), zéro vide */
.app .al-layout .alhq-cockpit-panel .alhq-det-ico.has-illus{
  background-size:cover; background-position:center; background-color:var(--al-abyss2); font-size:0;
  border-color:var(--al-line-2);
}
.app .al-layout .alhq-cockpit-panel .alhq-det-name{ font-size:20px;letter-spacing:1.5px; }
.app .al-layout .alhq-cockpit-panel .alhq-det-lv{ font-size:var(--al-fs-label);color:var(--al-cyan-soft); }

@media (max-width:960px){
  .app .al-layout .alhq-cockpit{ grid-template-columns:1fr; }
  .app .al-layout .alhq-cockpit-panel{ position:static; }
  .app .al-layout .alhq-cockpit-rail .alhq-bld-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
}
@media (max-width:430px){
  .app .al-layout .alhq-cockpit-rail .alhq-bld-grid{ grid-template-columns:1fr; }
  .app .al-layout .alhq-cockpit-panel .alhq-det-ico{ height:120px;font-size:50px; }
}