@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Surligneur de marque (repris de 5000.dev) */
  .highlight-marker { position: relative; display: inline-block; }
  .highlight-marker::before {
    content: '';
    position: absolute;
    display: block;
    bottom: -0.3em;
    left: 0;
    width: 100%;
    height: 0.25em;
    background-color: #94F0E4;
    transform: skew(-12deg);
    z-index: 0;
  }

  /* Loader "comète" : deux points qui tournent, chacun avec une traînée dégradée.
     À coupler avec animate-spin. */
  .comet-loader {
    border-radius: 9999px;
    background: conic-gradient(from 0deg,
      #98F9E9 0deg, #98F9E9 6deg,
      rgba(152, 249, 233, 0) 150deg,
      rgba(152, 249, 233, 0) 180deg,
      #98F9E9 180deg, #98F9E9 186deg,
      rgba(152, 249, 233, 0) 330deg,
      rgba(152, 249, 233, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  }
}