.hm-armistice { display: contents; }

.hm-armistice > div,
.hm-mention-tete,
.hm-semis {
  pointer-events: none;
}

.hm-armistice > div {
  position: fixed;
  z-index: 40;
}

@media not all and (hover: hover) and (min-width: 1024px) {
  .hm-armistice:not(.hm-mobile) { display: none; }
}

.hm-armistice div > svg,
.hm-mention-tete svg { display: block; width: 100%; height: 100%; }


.hm-bleuet path { stroke: #1d3f9a; stroke-width: 0.4; stroke-linejoin: round; }
.hm-bleuet.hm-t0 path { fill: #3b6fd8; }
.hm-bleuet.hm-t1 path { fill: #5b8def; }
.hm-bleuet.hm-t2 path { fill: #2f5cc4; }
.hm-coeur { fill: #1e1b5a; }
.hm-tige { fill: none; stroke: #5f8a4a; stroke-width: 2; stroke-linecap: round; }
.hm-feuille-fine { fill: none; stroke: #7da05f; stroke-width: 1.4; stroke-linecap: round; }
.hm-bouton { fill: #6f9a52; }
.hm-bouton-bleu { fill: #3b6fd8; }


.hm-coin {
  top: 0;
  width: 260px;
  height: 130px;
}

.hm-coin-gauche { left: 0; transform-origin: 0 0; }
.hm-coin-droite { right: 0; transform: scaleX(-1); transform-origin: 50% 0; }

.hm-armistice:not(.hm-complet) .hm-coin {
  width: 170px;
  height: 85px;
  opacity: 0.8;
}


.hm-joue.hm-coin-gauche { animation: hm-brise 4s ease-in-out 2; }
.hm-joue.hm-coin-droite { animation: hm-brise-droite 4s ease-in-out 2; animation-delay: 0.6s; }

@keyframes hm-brise {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(1.6deg); }
}

@keyframes hm-brise-droite {
  0%, 100% { transform: scaleX(-1) rotate(0); }
  50%      { transform: scaleX(-1) rotate(1.6deg); }
}


.hm-armistice > .hm-scene {
  bottom: 0;
  width: 230px;
  height: 168px;
  display: none;
}

@media (min-width: 1280px) and (min-height: 700px) {
  .hm-armistice > .hm-scene { display: block; }
}

.hm-scene-gauche { left: 0; }
.hm-scene-droite { right: 0; }

.hm-armistice:not(.hm-complet) > .hm-scene {
  width: 184px;
  height: 134px;
  opacity: 0.85;
}

.hm-sol { fill: #33452f; }
.hm-laurier { fill: #3f6b3a; }
.hm-laurier-clair { fill: #5a8a48; }

.hm-bande { fill: none; stroke-width: 3.8; stroke-linecap: butt; }
.hm-bleu { stroke: #2a4fb0; }
.hm-blanc { stroke: #f4f4f4; }
.hm-rouge { stroke: #d1283a; }
.hm-noeud { fill: #f4f4f4; stroke: #2a4fb0; stroke-width: 1.2; }
.hm-noeud-centre { fill: #d1283a; }


.hm-pans { transform-box: fill-box; transform-origin: 50% 0; }
.hm-joue .hm-pan-g { animation: hm-flotte 2.5s ease-in-out 2; }
.hm-joue .hm-pan-d { animation: hm-flotte 2.5s ease-in-out 2; animation-delay: -1.1s; }

@keyframes hm-flotte {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(5deg); }
  70%      { transform: rotate(-4deg); }
}

.hm-chaume { fill: none; stroke: #b48a2c; stroke-width: 1.6; }
.hm-grain { fill: #d9b04a; }
.hm-barbe { fill: none; stroke: #c9a043; stroke-width: 0.8; }


.hm-epi { transform-box: fill-box; transform-origin: 50% 100%; }
.hm-joue .hm-epi { animation: hm-ondule 3s ease-in-out 2; }
.hm-joue .hm-epi:nth-child(2n) { animation-delay: -0.5s; }
.hm-joue .hm-epi:nth-child(3n) { animation-delay: -1s; }

@keyframes hm-ondule {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(4deg); }
}


.hm-petale {
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
  opacity: 0.8;
}

.hm-petale.hm-t0 { background: #3b6fd8; }
.hm-petale.hm-t1 { background: #6f98f0; }
.hm-petale.hm-t2 { background: #2f5cc4; }


.hm-semis {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.75;
}

.hm-semis > div { position: absolute; }


.hm-colombe {
  top: 110px;
  left: 0;
  width: 90px;
  height: 56px;
  transform: translate(-110px, 0);
}

.hm-joue.hm-colombe { animation: hm-vol 14s linear 1; }

.hm-plume { fill: #f6f7fb; stroke: #b9c2d6; stroke-width: 0.8; }
.hm-ombre { fill: #dde3ee; }
.hm-trait-plume { fill: none; stroke: #c3cbdc; stroke-width: 0.8; }
.hm-oeil { fill: #1e1b3a; }
.hm-rameau { fill: none; stroke: #6b5a2e; stroke-width: 1; }
.hm-olive { fill: #6f9a52; }

.hm-aile, .hm-aile-loin { transform-box: fill-box; transform-origin: 50% 100%; }
.hm-joue .hm-aile { animation: hm-battement 0.7s ease-in-out infinite alternate; }
.hm-joue .hm-aile-loin { animation: hm-battement 0.7s ease-in-out infinite alternate; animation-delay: -0.1s; }

@keyframes hm-battement {
  from { transform: scaleY(1); }
  to   { transform: scaleY(-0.55); }
}

@keyframes hm-vol {
  0%   { transform: translate(-110px, 30px); }
  25%  { transform: translate(25vw, 0); }
  50%  { transform: translate(50vw, 18px); }
  75%  { transform: translate(75vw, -6px); }
  100% { transform: translate(calc(100vw + 110px), 10px); }
}


.hm-mention-tete {
  position: absolute;
  top: 10px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}

.hm-mention-tete svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.hm-rouge-plein { fill: #d1283a; }
.hm-blanc-plein { fill: #f4f4f4; }
.hm-bleu-plein { fill: #2a4fb0; }

.hm-mention {
  font: 600 12px/1 system-ui, sans-serif;
  color: #fff;
  background: #1e3a8a;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}


.hm-armistice.hm-mobile .hm-coin {
  width: 120px;
  height: 60px;
  opacity: 0.85;
}

@media (max-width: 700px) {
  .hm-mention-tete { top: 6px; right: 8px; }
  .hm-mention-tete svg { width: 16px; height: 16px; }
  .hm-mention { font-size: 10px; padding: 3px 6px; }
}