/**
 * Comm360 — Souligné aléatoire au survol (Draw Random Underline, reprise fidèle d'Osmo).
 *
 * Un trait SVG « dessiné à la main » se trace sous le texte au survol ; à chaque
 * survol, l'UN des tracés (plusieurs variantes) est tiré AU SORT. La boîte du
 * trait est un élément vide (enfant du déclencheur) où le script injecte le SVG.
 *
 * Déclencheur (règle 1) : classe .comm360-souligne-aleatoire, AVEC conservation
 * des attributs/classes Osmo d'origine ([data-draw-line] / .text-draw…).
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * CSS repris VERBATIM de la fiche Osmo. SEULE adaptation permise et appliquée :
 * la couleur du trait, codée en dur dans la fiche (.text-draw__box { color:
 * #e55050 }), est pilotée par une variable pour rester réglable dans le back :
 *   #e55050  →  var(--comm360-souligne-aleatoire-couleur, #e55050)
 * Le défaut #e55050 est la valeur exacte de la fiche. Les sélecteurs globaux
 * .text-draw* sont scopés sous .comm360-souligne-aleatoire pour ne pas fuiter.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.comm360-souligne-aleatoire.text-draw,
.comm360-souligne-aleatoire .text-draw {
  cursor: pointer;
  margin-left: 1em;
  margin-right: 1em;
  padding-top: .625em;
  font-size: 2em;
  text-decoration: none;
}

.comm360-souligne-aleatoire .text-draw__span {
  margin-bottom: 0;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.1;
}

.comm360-souligne-aleatoire .text-draw__box {
  color: var(--comm360-souligne-aleatoire-couleur, #e55050); /* couleur du trait (fiche : #e55050) */
  width: 100%;
  height: .625em;
  position: relative;
}

.comm360-souligne-aleatoire .text-draw__box svg {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: visible !important;
}