/* Edit Bee : carte interactive des ruches. Mesures relevées sur le composant Figma « Repère rucher »,
   exprimées en unités de carte (1 = taille Figma) : --cr-p repères, --cr-t petites étiquettes, --cr-u vignette ouverte. */
.carte-ruches {
  --cr-u: 1; --cr-p: 1; --cr-t: 1;
  --cr-jaune: #ffcb10; --cr-violet: #a77bd6; --cr-vert: #7cc46f; --cr-trait: #12080c;
  width: 100%;
}
:where(.carte-ruches) { position: relative; }   /* sans priorité : une page peut la placer en absolu */
.cr-fond { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; background: #cfe6ef; }
.cr-dessin { position: absolute; }
.cr-dessin svg, .cr-dessin img { display: block; width: 100%; height: 100%; }

/* Repères rouges */
.cr-repere {
  position: absolute; width: calc(28px * var(--cr-p)); height: calc(40px * var(--cr-p));
  margin: calc(-36.4px * var(--cr-p)) 0 0 calc(-14px * var(--cr-p));
  padding: 0; border: 0; background: none; cursor: pointer; z-index: 1;
  transition: transform .15s ease; transform-origin: 50% 91%;
}
.cr-repere::before { content: ""; position: absolute; inset: -4px; }   /* zone d'appui plus large que le dessin */
.cr-repere svg { display: block; width: 100%; height: 100%; }
.cr-repere:hover, .cr-repere:focus-visible, .cr-repere[aria-expanded="true"] { transform: scale(1.12); z-index: 2; }
.cr-repere:focus-visible { outline: 3px solid var(--cr-trait); outline-offset: 1px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }

/* Petites étiquettes « X n », toujours visibles à côté de leur repère */
.cr-etiquette {
  position: absolute; z-index: 1; box-sizing: border-box; cursor: pointer;
  min-width: calc(26px * var(--cr-t)); height: calc(26px * var(--cr-t)); padding: 0 calc(3px * var(--cr-t));
  margin-top: calc(-22.4px * var(--cr-p) - 13px * var(--cr-t)); margin-left: calc(12px * var(--cr-p) + 12.8px * var(--cr-t));
  display: flex; align-items: center; justify-content: center;
  border: calc(2.5px * var(--cr-t)) solid var(--cr-trait); border-radius: calc(5px * var(--cr-t));
  background: var(--cr-fond-vignette); color: var(--cr-trait);
  font: 400 calc(11px * var(--cr-t)) / 1 "Calistoga", Georgia, serif; white-space: nowrap; letter-spacing: 0;
}
.cr-etiquette[data-cote="gauche"] { margin-left: calc(-12px * var(--cr-p) - 12.8px * var(--cr-t)); transform: translateX(-100%); }
.cr-etiquette[hidden] { display: none; }
.cr-etiquette .cr-queue {
  position: absolute; top: calc(50% - 9px * var(--cr-t)); left: calc(-9.5px * var(--cr-t));
  width: calc(10px * var(--cr-t)); height: calc(18px * var(--cr-t)); overflow: visible; color: var(--cr-fond-vignette);
}
.cr-etiquette[data-cote="gauche"] .cr-queue { left: auto; right: calc(-9.5px * var(--cr-t)); transform: scaleX(-1); }

/* Vignette ouverte : carré de 100 × 100 */
.cr-vignette {
  position: absolute; z-index: 3; box-sizing: border-box;
  width: calc(100px * var(--cr-u)); height: calc(100px * var(--cr-u));
  padding: calc(6px * var(--cr-u)) calc(5px * var(--cr-u)) calc(5px * var(--cr-u)) calc(3.2px * var(--cr-u));
  display: flex; flex-direction: column; justify-content: space-between;
  border: calc(4px * var(--cr-u)) solid var(--cr-trait); border-radius: calc(10px * var(--cr-u));
  background: var(--cr-fond-vignette); color: var(--cr-fond-vignette);   /* color : remplissage de la pointe */
  cursor: pointer; animation: cr-apparait .16s ease-out;
}
.cr-vignette[hidden] { display: none; }
.cr-vignette[data-couleur="jaune"], .cr-etiquette[data-couleur="jaune"] { --cr-fond-vignette: var(--cr-jaune); }
.cr-vignette[data-couleur="violet"], .cr-etiquette[data-couleur="violet"] { --cr-fond-vignette: var(--cr-violet); }
.cr-vignette[data-couleur="vert"], .cr-etiquette[data-couleur="vert"] { --cr-fond-vignette: var(--cr-vert); }
.cr-vignette .cr-queue {
  position: absolute; top: calc(var(--cr-queue) - 4px * var(--cr-u) - 12px * var(--cr-u));
  left: calc(-14px * var(--cr-u)); width: calc(14px * var(--cr-u)); height: calc(24px * var(--cr-u)); overflow: visible;
}
.cr-vignette[data-cote="gauche"] .cr-queue { left: auto; right: calc(-14px * var(--cr-u)); transform: scaleX(-1); }
.cr-vignette p { margin: 0; color: var(--cr-trait); }
.cr-nom {
  display: flex; align-items: flex-start; gap: calc(4px * var(--cr-u));
  font: 700 calc(13px * var(--cr-u)) / calc(14px * var(--cr-u)) "Open Sans", system-ui, sans-serif; letter-spacing: 0;
}
.cr-picto { flex: none; width: calc(11px * var(--cr-u)); height: calc(15.4px * var(--cr-u)); }
.cr-colonies {
  display: flex; align-items: center; gap: calc(8px * var(--cr-u));
  font: 400 calc(22px * var(--cr-u)) / 1 "Calistoga", Georgia, serif; white-space: nowrap;
}
.cr-ruche { flex: none; width: calc(32px * var(--cr-u)); height: calc(30.6px * var(--cr-u)); }
.cr-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes cr-apparait { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .cr-vignette { animation: none; } .cr-repere { transition: none; } }

/* Zoom et déplacement */
.carte-ruches { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.carte-ruches.cr-zoomee { touch-action: none; }
.carte-ruches.cr-glisse { cursor: grabbing; }
.carte-ruches.cr-glisse .cr-vignette { pointer-events: none; }
.cr-repere.cr-hors, .cr-etiquette.cr-hors { visibility: hidden; }
.cr-commandes { position: absolute; z-index: 4; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; cursor: default; }
.cr-commandes button {
  width: 40px; height: 40px; padding: 0; border: 2.5px solid var(--cr-trait); border-radius: 10px;
  background: #fff; color: var(--cr-trait); font: 700 24px/1 "Open Sans", system-ui, sans-serif; cursor: pointer;
  box-shadow: 1px 4px 2px rgba(0,0,0,.18);
}
.cr-commandes button:hover:not(:disabled) { background: var(--cr-jaune); }
.cr-commandes button:disabled { opacity: .35; cursor: default; }
.cr-commandes button:focus-visible { outline: 3px solid var(--cr-trait); outline-offset: 2px; }

/* Légende */
.ruches-legende { color: #12080c; }
.ruches-legende .cr-consigne { margin: 0; font: 300 20px/26px "Open Sans", system-ui, sans-serif; letter-spacing: 2px; }
.ruches-legende ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.ruches-legende li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.ruches-legende b { font: 400 24px/31px "Calistoga", Georgia, serif; }
.ruches-legende .cr-compte { font: 300 16px/24px "Open Sans", system-ui, sans-serif; letter-spacing: .8px; }
.cr-pastille { width: 39px; height: 30px; box-sizing: border-box; border: 3px solid #12080c; border-radius: 9px; }
.cr-pastille[data-couleur="jaune"] { background: #ffcb10; }
.cr-pastille[data-couleur="violet"] { background: #a77bd6; }
.cr-pastille[data-couleur="vert"] { background: #7cc46f; }
.ruches-legende .cr-note { margin: 22px 0 0; font: 600 13px/18px "Open Sans", system-ui, sans-serif; letter-spacing: 1.2px; }