/* Bouton « Signaler un bug » et son calque posé sur la page (assets/js/signalement.js).
   Charte CyberXL : marine, violet et son dégradé (brand.css). */

/* À gauche du sélecteur de thème (en bas à droite, .bd-mode-toggle). */
.signalement-bouton {
  position: fixed;
  right: calc(1rem + 3rem);
  bottom: 1rem;
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 42px;
  padding: 0 .9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--cx-surface, var(--bs-body-bg));
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 4px 14px rgba(1, 15, 64, .18);
}
.signalement-bouton:hover,
.signalement-bouton:focus-visible { border-color: var(--bs-primary); color: var(--bs-primary); }
.signalement-bouton .bi { font-size: 1.1rem; }
/* Masqué pendant le signalement. */
body:has(.signalement-calque:not([hidden])) .signalement-bouton { visibility: hidden; }

/* Mobile : sélecteur de thème en bas à GAUCHE, menu en bas à droite (menu.html.twig). */
@media (max-width: 991.98px) {
  .signalement-bouton { right: auto; left: calc(1rem + 3rem); width: 42px; padding: 0; justify-content: center; }
  .signalement-bouton-texte { display: none; }
}

/* ---- Calque : au-dessus de tout (fenêtres Bootstrap, boutons flottants) ---- */
.signalement-calque {
  --sig-marine: var(--cx-marine, #010F40);
  --sig-violet: var(--cx-violet, #6263FC);
  /* Fond des textes et icônes blancs : violet-600 → violet-800 (contraste ≥ 5:1). */
  --sig-degrade: linear-gradient(90deg, var(--cx-violet-600, #585BE9) 0%, var(--cx-violet-800, #4046BA) 100%);
  position: fixed;
  inset: 0;
  z-index: 2100;
}
.signalement-calque[hidden] { display: none; }
/* Liseré en dégradé violet autour de l'écran : la page est en mode signalement. */
.signalement-calque::after {
  content: "";
  position: fixed;
  inset: 0;
  padding: 3px;
  background: var(--cx-gradient, linear-gradient(90deg, #8A8BFF 0%, #5753DD 100%)); /* décoratif */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* Zones floutées en direct (outil Masquer) : sous le canevas d'annotations. */
.signalement-flous { position: absolute; inset: 0; pointer-events: none; }
.signalement-flou {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, .8);
  border-radius: .25rem;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background: rgba(247, 245, 240, .15);
}
.signalement-flou::after {
  content: "Flouté";
  position: absolute;
  top: .25rem;
  left: .25rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--sig-marine);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.signalement-dessin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none; /* dessin au doigt ou au stylet */
}
.signalement-dessin[data-outil="element"] { cursor: pointer; }
.signalement-dessin[data-outil="pastille"] { cursor: copy; }
.signalement-dessin[data-outil="texte"] { cursor: text; }

/* Badge : mode + consigne de l'outil. */
.signalement-badge {
  position: absolute;
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  max-width: calc(100vw - 12rem);
  border-radius: 999px;
  background: var(--sig-marine);
  color: #fff;
  font-size: .8rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(1, 15, 64, .35);
  pointer-events: none;
}
.signalement-badge-mode {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  background: var(--sig-degrade);
  font-weight: 700;
}
.signalement-badge [data-signalement-consigne] { padding: .35rem .9rem; overflow: hidden; text-overflow: ellipsis; }
.signalement-pouls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: signalement-pouls 1.6s ease-out infinite;
}
@keyframes signalement-pouls {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
  100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .signalement-pouls { animation: none; } }

.signalement-quitter {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .35rem .8rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: var(--sig-marine);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(1, 15, 64, .35);
}
.signalement-quitter:hover,
.signalement-quitter:focus-visible { background: var(--sig-violet); }

/* Barre d'outils verticale, à gauche, en groupes ; libellé au survol. */
.signalement-barre {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: calc(100vh - 6rem);
  padding: .35rem;
  border-radius: 1rem;
  background: var(--sig-marine);
  box-shadow: 0 8px 24px rgba(1, 15, 64, .4);
}
.signalement-groupe { display: flex; flex-direction: column; gap: .15rem; }
.signalement-groupe + .signalement-groupe { padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .15); }
.signalement-barre button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: 1.05rem;
}
.signalement-barre button:hover,
.signalement-barre button:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.signalement-barre button[aria-pressed="true"] { background: var(--sig-degrade); color: #fff; }
.signalement-barre button[data-libelle]::after {
  content: attr(data-libelle);
  position: absolute;
  left: calc(100% + .6rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .2rem .55rem;
  border-radius: .4rem;
  background: var(--sig-marine);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.signalement-barre button:hover::after,
.signalement-barre button:focus-visible::after { opacity: 1; }
.signalement-pastille {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Champ de l'outil texte, posé à l'endroit cliqué. */
.signalement-texte {
  position: absolute;
  min-width: 12rem;
  padding: 0 .2em;
  border: 1px dashed currentColor;
  background: rgba(255, 255, 255, .9);
  font-weight: 700;
  font-family: Barlow, Arial, sans-serif;
  line-height: 1.1;
}

/* Panneau, en bas à droite ; réductible pour annoter ce qu'il cache. */
.signalement-panneau {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: min(23rem, calc(100vw - 6rem));
  overflow: hidden;
  border-radius: 1rem;
  background: var(--cx-surface, var(--bs-body-bg));
  color: var(--bs-body-color);
  box-shadow: 0 12px 32px rgba(1, 15, 64, .35);
}
.signalement-panneau-entete {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem .6rem 1rem;
  background: var(--sig-marine);
  border-bottom: 3px solid var(--sig-violet);
  color: #fff;
}
.signalement-panneau-titre { flex: 1; font-family: var(--cx-font-title, inherit); font-weight: 700; font-size: .95rem; }
.signalement-reduire {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.signalement-reduire .bi { display: inline-block; transition: transform .15s; }
.signalement-panneau.est-reduit .signalement-reduire .bi { transform: rotate(180deg); }
.signalement-panneau.est-reduit .signalement-panneau-corps { display: none; }
.signalement-panneau-corps { padding: .9rem 1rem 1rem; }

.signalement-nature { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; margin-bottom: .6rem; }
.signalement-nature label {
  padding: .35rem .25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.signalement-nature .btn-check:checked + label { border-color: transparent; background: var(--sig-degrade); color: #fff; }
.signalement-nature .btn-check:focus-visible + label { outline: 2px solid var(--sig-violet); outline-offset: 2px; }
.signalement-recap { margin: .5rem 0; font-size: .75rem; color: var(--bs-secondary-color); }
.signalement-panneau-pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.signalement-raccourcis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--bs-secondary-color); }

@media (max-width: 575.98px) {
  .signalement-panneau { left: 3.9rem; right: .75rem; bottom: .75rem; width: auto; }
  .signalement-badge [data-signalement-consigne] { display: none; }
}

/* Confirmation d'envoi. */
.signalement-merci {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  z-index: 3000;
  margin: 0;
}