/* ==========================================================================
   map.css : carte geographique, cartogramme, encart, legende
   ========================================================================== */

.carte-bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--gouttiere);
  align-items: start;
}

@media (max-width: 1000px) {
  .carte-bloc {
    grid-template-columns: minmax(0, 1fr);
  }
}

.carte-panneau {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
}

/* -------------------------------------------------------- commutateurs -- */

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ligne);
}

.segments {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 10px;
  position: relative;
}

.segments__bouton {
  position: relative;
  z-index: 1;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-douce);
  transition: color var(--duree-courte) var(--doux);
  white-space: nowrap;
}

.segments__bouton[aria-selected="true"] {
  color: var(--encre);
}

.segments__curseur {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: 8px;
  background: var(--papier);
  box-shadow: var(--ombre-1);
  transition: transform var(--duree) var(--ressort),
    width var(--duree) var(--ressort);
  z-index: 0;
}

/* ------------------------------------------------------------- la carte */

.carte-scene {
  position: relative;
  padding: var(--e2);
}

.carte-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.etat {
  fill: var(--vide);
  stroke: var(--papier);
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill var(--duree) var(--ressort),
    transform var(--duree-courte) var(--ressort);
  transform-box: fill-box;
  transform-origin: center;
}

.etat:hover,
.etat:focus-visible {
  stroke: var(--encre);
  stroke-width: 1.6;
  outline: none;
}

.etat[data-actif="oui"] {
  stroke: var(--encre);
  stroke-width: 2;
}

.etat[data-parti="D"] {
  fill: var(--dem-gagne);
}

.etat[data-parti="R"] {
  fill: var(--rep-gagne);
}

.etat[data-parti="I"] {
  fill: var(--ind-gagne);
}

.etat[data-parti="D"][data-force="projete"] {
  fill: var(--dem-projete);
}

.etat[data-parti="R"][data-force="projete"] {
  fill: var(--rep-projete);
}

.etat[data-parti="D"][data-force="sur"] {
  fill: var(--dem-sur);
}

.etat[data-parti="R"][data-force="sur"] {
  fill: var(--rep-sur);
}

.etat[data-parti="D"][data-force="probable"] {
  fill: var(--dem-penche);
}

.etat[data-parti="R"][data-force="probable"] {
  fill: var(--rep-penche);
}

.etat[data-parti="indecis"] {
  fill: var(--indecis);
}

.etat[data-enjeu="non"] {
  fill: var(--vide);
  cursor: default;
  opacity: 0.55;
}

/* onde emise quand un siege bascule */
.onde {
  fill: none;
  stroke-width: 2.5;
  opacity: 0;
  pointer-events: none;
}

.onde--D {
  stroke: var(--dem-gagne);
}

.onde--R {
  stroke: var(--rep-gagne);
}

.onde--anime {
  animation: onde 1400ms var(--ressort) forwards;
}

@keyframes onde {
  0% {
    r: 6;
    opacity: 0.9;
    stroke-width: 3;
  }
  100% {
    r: 46;
    opacity: 0;
    stroke-width: 0.5;
  }
}

/* ------------------------------------------------- encart petits Etats */

.encart-titre {
  fill: var(--encre-faible);
  font-family: var(--texte);
  font-size: 10px;
  font-weight: 600;
}

.tuile {
  cursor: pointer;
}

.tuile__fond {
  fill: var(--vide);
  stroke: var(--papier);
  stroke-width: 1.5;
  rx: 3;
  transition: fill var(--duree) var(--ressort);
}

.tuile__code {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  fill: var(--encre);
  transition: fill var(--duree-courte) var(--doux);
}

.tuile[data-clair="non"] .tuile__code {
  fill: #fff;
}

.tuile:hover .tuile__fond,
.tuile:focus-visible .tuile__fond {
  stroke: var(--encre);
}

.tuile[data-actif="oui"] .tuile__fond {
  stroke: var(--encre);
  stroke-width: 2.5;
}

.tuile[data-parti="D"] .tuile__fond {
  fill: var(--dem-gagne);
}

.tuile[data-parti="R"] .tuile__fond {
  fill: var(--rep-gagne);
}

.tuile[data-parti="I"] .tuile__fond {
  fill: var(--ind-gagne);
}

.tuile[data-parti="D"][data-force="projete"] .tuile__fond {
  fill: var(--dem-projete);
}

.tuile[data-parti="R"][data-force="projete"] .tuile__fond {
  fill: var(--rep-projete);
}

.tuile[data-parti="D"][data-force="sur"] .tuile__fond {
  fill: var(--dem-sur);
}

.tuile[data-parti="R"][data-force="sur"] .tuile__fond {
  fill: var(--rep-sur);
}

.tuile[data-parti="D"][data-force="probable"] .tuile__fond {
  fill: var(--dem-penche);
}

.tuile[data-parti="R"][data-force="probable"] .tuile__fond {
  fill: var(--rep-penche);
}

.tuile[data-parti="indecis"] .tuile__fond {
  fill: var(--indecis);
}

.tuile[data-enjeu="non"] {
  opacity: 0.45;
  cursor: default;
}

/* le cartogramme se met en place tuile par tuile */
.carte-svg[data-vue="cartogramme"] .tuile {
  animation: tuile-entree 460ms var(--ressort) backwards;
  animation-delay: calc(var(--rang, 0) * 9ms);
}

@keyframes tuile-entree {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tuile {
  transform-box: fill-box;
  transform-origin: center;
}

/* ------------------------------------------------------------- legende */

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 14px;
  border-top: 1px solid var(--ligne);
  font-size: var(--t-micro);
  color: var(--encre-douce);
}

.legende__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legende__puce {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex: none;
}

/* ---------------------------------------------------- infobulle survol */

.infobulle {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  background: var(--encre);
  color: var(--papier);
  padding: 9px 12px;
  border-radius: var(--rayon-petit);
  font-size: var(--t-micro);
  line-height: 1.4;
  box-shadow: var(--ombre-2);
  opacity: 0;
  transform: translate(-50%, -125%) scale(0.94);
  transition: opacity 160ms var(--doux), transform 160ms var(--ressort);
  max-width: 230px;
}

.infobulle[data-visible="oui"] {
  opacity: 1;
  transform: translate(-50%, -115%) scale(1);
}

.infobulle b {
  display: block;
  font-size: var(--t-petit);
  margin-bottom: 2px;
}

/* Cible de secours pour les territoires trop petits pour être visés.
   Invisible, mais elle reçoit les clics et le survol. */
.etat-cible {
  fill: transparent;
  cursor: pointer;
}

/* Balayage : la carte défile État par État, comme un générique de soirée
   électorale américaine. */
.etat[data-balaye="oui"],
.tuile[data-balaye="oui"] .tuile__fond {
  stroke: var(--llb-magenta);
  stroke-width: 3;
}

.etat[data-balaye="oui"] {
  filter: brightness(1.18);
}