/* ═══════════════════════════════════════════════════════════════════════
   MODALES-CHARTE — patterns PARTAGÉS des modales SOMA
   (TICKET-MODALES-CHARTE, session dédiée 2026-07-07, GO Maxime)

   Contient les morceaux de grammaire communs à toutes les modales, pour ne
   plus les recopier fichier par fichier. Premier pattern mutualisé : la
   CROIX LOSANGE (règle gravée : jamais de « × » texte ni de bouton rond).

   USAGE .soma-x :
     <button class="soma-x <classe-locale>" aria-label="Fermer" onclick="…">
       <span></span><span></span><span></span><span></span>
     </button>
   · La classe LOCALE (ex .dvp-close) garde UNIQUEMENT le positionnement
     (position absolute/relative + top/right) — .soma-x ne définit pas
     `position` exprès pour ne rien casser.
   · Double classe .soma-x.soma-x = spécificité (0,2,0) : gagne la cascade
     sur l'ancien style local (0,1,0) quel que soit l'ordre de chargement.
   · Même dessin que .conso-popover-close-x (css/conso-modal-charte.css),
     source du pattern — à fusionner ici à terme.
   ═══════════════════════════════════════════════════════════════════════ */

.soma-x.soma-x {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  font-size: 0; /* neutralise un éventuel « × » texte résiduel */
  line-height: 0;
  border: 1.5px solid var(--green-border, rgba(47, 191, 122, .30));
  background: rgba(47, 191, 122, .08);
  border-radius: 6px;
  cursor: pointer;
  transform: rotate(45deg);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.soma-x.soma-x:hover {
  background: var(--green, #2FBF7A);
  border-color: var(--green, #2FBF7A);
  transform: rotate(45deg) scale(1.08);
  box-shadow: 0 2px 8px rgba(47, 191, 122, .28);
}
.soma-x.soma-x span {
  position: absolute;
  background: var(--green-dark, #0D6B35);
  border-radius: 1px;
  transition: background .18s ease;
}
.soma-x.soma-x:hover span { background: var(--white, #fff); }
.soma-x.soma-x span:nth-child(1) { top: 8px; left: 50%; width: 2px; height: 7px; transform: translateX(-50%); }
.soma-x.soma-x span:nth-child(2) { bottom: 8px; left: 50%; width: 2px; height: 7px; transform: translateX(-50%); }
.soma-x.soma-x span:nth-child(3) { left: 8px; top: 50%; height: 2px; width: 7px; transform: translateY(-50%); }
.soma-x.soma-x span:nth-child(4) { right: 8px; top: 50%; height: 2px; width: 7px; transform: translateY(-50%); }