/* ===== STABILO HIGHLIGHTER STYLES ===== */

/* Variables de couleurs */
:root {
    --stabilo-yellow: #fdfd12;
    --stabilo-pink: #ff6ad5;
    --stabilo-green: #b2ff59;
    --stabilo-red: #dc2626;
}

/* Structure de base */
.highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    z-index: 1;
    --mask-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M2,20 Q5,5 10,18 T20,15 T30,22 T40,17 T60,20 T80,18 T100,22 T120,16 T140,21 T160,18 T180,22 T198,18' stroke='black' stroke-width='35' fill='none' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

.highlight::before,
.highlight::after,
.highlight .extra-layer {
    content: "";
    position: absolute;
    background-color: var(--highlight-color, var(--stabilo-yellow));
    -webkit-mask-image: var(--mask-url);
    mask-image: var(--mask-url);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mix-blend-mode: multiply;
    z-index: -1;
    pointer-events: none;
}

/* Passage 1 */
.highlight::before {
    height: 85%; top: 10%; left: -8px; right: -4px; opacity: 0.7; transform: rotate(-0.6deg);
}

/* Passage 2 (Double) */
.highlight.double-pass::after,
.highlight.triple-pass::after {
    height: 60%; top: 25%; left: 2px; right: -12px; opacity: 0.55; transform: scaleX(-1) rotate(0.8deg);
}

/* Passage 3 (Triple) */
.highlight.triple-pass .extra-layer {
    height: 35%; top: 15%; left: -12px; right: 20%; opacity: 0.45; transform: scaleY(-1) rotate(-1.2deg);
}

/* Classes de couleurs */
.pink { --highlight-color: var(--stabilo-pink); }
.green { --highlight-color: var(--stabilo-green); }
.red { --highlight-color: var(--stabilo-red); }