/* Fix post-#71 : Stratégie trop basse + trou tabs */

/* Cause du trou à droite : grille tabs encore en 4 colonnes (onglet Stratégie retiré) */
.tabs {
  grid-template-columns: repeat(3, 1fr);
}

/* Cause du bloc trop bas : chamber en flex:1 + min-height 160px sur controls
   (vide réservé sous la scène quand chat/CTA sont cachés) */
.conseil {
  flex: 0 0 auto;
}
.conseil-chamber {
  position: relative;
  flex: 0 0 auto;
  gap: 10px;
}
.conseil-controls {
  min-height: 0;
}

/* ─── Séparateur conseil → stratégie (motif par civ) ─── */
.conseil-strategie {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
  flex: 0 0 auto;
}

.strategie-divider {
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath fill='black' d='M0 7h14v2H0zm26 0h14v2H26zM18 4h4v8h-4z'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  color: var(--accent);
}

.strategie-divider-rail {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  background-color: currentColor;
  opacity: 0.42;
  -webkit-mask-image: var(--strategie-rail-mask);
  mask-image: var(--strategie-rail-mask);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}

.strategie-divider-emblem {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.85;
}

.strategie-divider-emblem svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 28px;
  max-height: 28px;
  fill: currentColor;
  stroke: currentColor;
}

/* Motifs de rail (masques SVG) — un style par civilisation */
body[data-civ="hre"] {
  /* Croix + losanges (impérial) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath fill='black' d='M0 7h14v2H0zm34 0h14v2H34zM20 2h2v12h-2zM17 7h8v2h-8zM24 5l4 3-4 3-4-3z'/%3E%3C/svg%3E");
}
body[data-civ="rus"] {
  /* Ondes / dômes (russe) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M0 10c5-8 10-8 15 0s10 8 15 0 10-8 15 0'/%3E%3Ccircle cx='20' cy='4' r='1.4' fill='black'/%3E%3C/svg%3E");
}
body[data-civ="kt"] {
  /* Croix potentiées (templiers) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 16'%3E%3Cpath fill='black' d='M0 7.2h10v1.6H0zm26 0h10v1.6H26zM16.2 2h3.6v4.2H24v3.6h-4.2V14h-3.6V9.8H12V6.2h4.2z'/%3E%3C/svg%3E");
}
body[data-civ="mac"] {
  /* Pointes solaires (macédonien) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath fill='black' d='M0 7h12v2H0zm28 0h12v2H28zM20 2l1.2 4.2L25.5 5 22 8l3.5 3-4.3-1.2L20 14l-1.2-4.2L14.5 11 18 8l-3.5-3 4.3 1.2z'/%3E%3C/svg%3E");
}
body[data-civ="byz"] {
  /* Arches / clés grecques (byzantin) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' d='M2 12V7a5 5 0 0 1 10 0v5M18 12V7a5 5 0 0 1 10 0v5M34 12V7a5 5 0 0 1 10 0v5M0 13.5h48'/%3E%3C/svg%3E");
}
body[data-civ="hol"] {
  /* Chevron + rose simple (Lancaster) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' d='M0 8h12M32 8h12'/%3E%3Cpath fill='black' d='M22 3c1.2 1.8 2.2 2.8 3.6 3.6-1.2.3-2.4.3-3.6 0C20.6 5.8 21.6 4.8 22 3zm0 4.4c1.8 0 3.4 1.2 3.9 2.8-1.1-.3-2.2-.3-3.9 0-1.7-.3-2.8-.3-3.9 0 .5-1.6 2.1-2.8 3.9-2.8z'/%3E%3C/svg%3E");
}
body[data-civ="gh"] {
  /* Losanges steppe (Horde d’or) */
  --strategie-rail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath fill='black' d='M0 7h11v2H0zm29 0h11v2H29zM20 2l5 6-5 6-5-6zM20 5.2l2.4 2.8L20 10.8 17.6 8z'/%3E%3C/svg%3E");
}

/* ─── En-tête + contenu stratégie ─── */
.strategie-block-head {
  margin-bottom: 12px;
}

.strategie-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strategie-section {
  margin: 0;
  padding: 10px 0 10px 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

.strategie-section h3 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

.strategie-section p,
.strategie-section ul {
  margin: 0;
}

.strategie-section ul {
  padding-left: 18px;
}

.strategie-section li + li {
  margin-top: 4px;
}

.strategie-section textarea {
  margin: 0;
  min-height: 88px;
  width: 100%;
}

.strategie-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  padding-left: 14px;
}

.strategie-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px) {
  .strategie-columns {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  .strategie-section--lead {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 560px) {
  .strategie-divider {
    gap: 8px;
    margin: 6px 0 12px;
  }

  .strategie-divider-emblem {
    width: 24px;
    height: 24px;
  }

  .strategie-divider-emblem svg {
    max-width: 24px;
    max-height: 24px;
  }

  .strategie-section {
    padding-left: 10px;
  }
}