/* ================================================================
   PRIX MATH-UNIVERSE — affichage "45 DT", ancien prix rature,
   badge promo "-XX%" anime.
   Markup genere par les filtres WooCommerce de functions.php
   (mu_sale_price_with_badge / mu_tnd_symbol / mu_tnd_price_format).

   REGLES DU FICHIER :
   - Unites en px UNIQUEMENT (Histudy force html{font-size:10px}).
   - Charge a priorite 1001 : APRES le style.css du theme, donc a
     specificite egale nos regles gagnent la cascade.
   - Le theme peint les spans de prix en texte-degrade rose via
     ".rbt-price .current-price span" (0,2,1) et pose opacity/.4 sur
     del : chaque surcharge ci-dessous retablit explicitement
     -webkit-text-fill-color pour ne rien laisser passer.
   - Animations sur transform/opacity uniquement.
   ================================================================ */

/* ----------------------------------------------------------------
   1. CONTENEUR : prix actuel D'ABORD, puis l'ancien barre, puis le
      badge. L'ordre DOM (del, ins, badge — impose par WooCommerce)
      est reordonne visuellement par flexbox. direction:ltr : le
      prix "45 DT" est un ilot purement latin, meme dans un
      contexte arabe.
   ---------------------------------------------------------------- */
.rbt-price .current-price .price {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    direction: ltr;
}
.rbt-price .current-price .price ins { order: 1; }
.rbt-price .current-price .price del { order: 2; }
.rbt-price .current-price .price .mu-price-badge { order: 3; }

/* ----------------------------------------------------------------
   2. PRIX ACTUEL (ins) — et prix simple sans promo.
   ---------------------------------------------------------------- */
.rbt-price .current-price .price ins,
.rbt-price .current-price .price > .woocommerce-Price-amount {
    text-decoration: none;
    background: none;
    font-weight: 800;
    color: #5B0BA0;
    -webkit-text-fill-color: currentColor;
}
/* Le theme peint chaque span en texte-degrade rose (0,2,1) : on
   retablit notre violet sur les montants, a specificite superieure. */
.rbt-price .current-price .price ins .woocommerce-Price-amount,
.rbt-price .current-price .price ins .woocommerce-Price-currencySymbol,
.rbt-price .current-price .price > .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    background: none;
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}
/* Symbole "DT" legerement plus discret que le montant. */
.rbt-price .current-price .price .woocommerce-Price-currencySymbol {
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Pages details de cours : le grand prix passe en texte-degrade violet
   ANIME (un reflet lumineux le traverse en boucle — le "brillant" du
   badge, sur le prix lui-meme). Deux contextes : la carte laterale
   .rbt-price-wrapper (tutor/sidebar layout-1|2|3) et .large-size.
   Le degrade n'est applique QUE si background-clip:text est supporte :
   sans cette garde, un moteur qui honore -webkit-text-fill-color mais
   pas background-clip peindrait un rectangle et rendrait le texte
   invisible. */
.rbt-price.large-size .current-price .price ins,
.rbt-price.large-size .current-price .price > .woocommerce-Price-amount,
.rbt-price-wrapper .rbt-price .current-price .price ins,
.rbt-price-wrapper .rbt-price .current-price .price > .woocommerce-Price-amount {
    font-size: 34px;
    line-height: 1.15;
    color: #5B0BA0;
}
.rbt-price-wrapper .rbt-price .current-price .price del,
.rbt-price.large-size .current-price .price del {
    font-size: 19px;
}
.rbt-price-wrapper .rbt-price .current-price .price .mu-price-badge,
.rbt-price.large-size .current-price .price .mu-price-badge {
    font-size: 13.5px;
    padding: 4px 12px;
}
@keyframes mu-price-shimmer {
    0%        { background-position: 115% 0; }
    55%, 100% { background-position: -15% 0; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .rbt-price.large-size .current-price .price ins .woocommerce-Price-amount,
    .rbt-price.large-size .current-price .price > .woocommerce-Price-amount,
    .rbt-price-wrapper .rbt-price .current-price .price ins .woocommerce-Price-amount,
    .rbt-price-wrapper .rbt-price .current-price .price > .woocommerce-Price-amount {
        background: linear-gradient(110deg, #7C3AED 0%, #5B0BA0 38%, #C4B5FD 50%, #5B0BA0 62%, #7C3AED 100%);
        background-size: 230% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: mu-price-shimmer 4.8s ease-in-out 1s infinite;
    }
}

/* ----------------------------------------------------------------
   3. ANCIEN PRIX (del) : gris, rature diagonale rouge dessinee a
      l'ouverture de la page (scaleX 0 -> 1).
   ---------------------------------------------------------------- */
.rbt-price .current-price .price del {
    position: relative;
    text-decoration: none;
    opacity: 1;
    margin: 0;
    font-weight: 600;
    /* #667085 : 4,95:1 sur blanc (WCAG 1.4.3) — l'ancien prix porte une
       vraie information, pas de gris decoratif sous 4,5:1. */
    color: #667085;
    -webkit-text-fill-color: currentColor;
}
.rbt-price .current-price .price del .woocommerce-Price-amount,
.rbt-price .current-price .price del .woocommerce-Price-currencySymbol {
    background: none;
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}
.rbt-price .current-price .price del::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: #F43F5E;
    transform: rotate(-8deg) scaleX(1);
    transform-origin: 50% 50%;
    animation: mu-price-strike 600ms cubic-bezier(0.23, 1, 0.32, 1) 350ms backwards;
    pointer-events: none;
}
@keyframes mu-price-strike {
    from { transform: rotate(-8deg) scaleX(0); }
    to   { transform: rotate(-8deg) scaleX(1); }
}

/* ----------------------------------------------------------------
   4. BADGE PROMO "-XX%" : pilule degradee rose/rouge, pop d'entree
      a ressort, tremblement periodique + balayage brillant — la
      meme personnalite d'animation que le centre d'aide.
   ---------------------------------------------------------------- */
.mu-price-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 3px 10px;
    border-radius: 999px;
    /* Orange de la marque (#FF8C00) : texte brun fonce #4A2500 pour un
       contraste WCAG >= 7:1 sur toute la pilule. */
    background: linear-gradient(135deg, #FFB238 0%, #FF8C00 55%, #F27405 100%);
    color: #4A2500;
    -webkit-text-fill-color: #4A2500;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
    /* Boucle continue demandee (l'animation reste coupee pour les
       utilisateurs en prefers-reduced-motion, section 6). */
    animation:
        mu-badge-pop 500ms cubic-bezier(0.34, 1.35, 0.64, 1) 250ms backwards,
        mu-badge-nudge 7s ease-in-out 3.5s infinite;
}
/* Le texte-degrade du theme (0,2,1) est battu ici en (0,3,0). */
.rbt-price .current-price .mu-price-badge {
    background: linear-gradient(135deg, #FFB238 0%, #FF8C00 55%, #F27405 100%);
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #4A2500;
    color: #4A2500;
}
@keyframes mu-badge-pop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes mu-badge-nudge {
    0%, 10%, 100% { transform: none; }
    2.5% { transform: rotate(-7deg) scale(1.12); }
    5%   { transform: rotate(5deg)  scale(1.06); }
    7.5% { transform: rotate(-2deg) scale(1.02); }
}
/* Balayage lumineux en boucle continue. */
.mu-price-badge-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 68%);
    transform: translateX(-130%);
    animation: mu-badge-shine 5.5s ease-in-out 1.8s infinite;
    pointer-events: none;
}
/* Le texte-degrade du theme (".rbt-price .current-price span", 0,2,1)
   ecrase le background du span de brillance (et background-clip:text sur
   un span vide ne peint rien) : on retablit a (0,3,0). */
.rbt-price .current-price .mu-price-badge-shine {
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 68%);
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}
@keyframes mu-badge-shine {
    0%        { transform: translateX(-130%); }
    16%, 100% { transform: translateX(130%); }
}

/* ----------------------------------------------------------------
   5. CONTEXTES WOOCOMMERCE GENERIQUES (boutique, fiche produit,
      panier, mini-panier) : memes principes, sans le reordonnement
      flex (les tableaux du panier gardent leur mise en page).
   ---------------------------------------------------------------- */
.woocommerce .price ins,
.woocommerce ins .woocommerce-Price-amount,
.widget_shopping_cart .woocommerce-Price-amount {
    text-decoration: none;
}
.woocommerce .price del {
    opacity: 0.55;
}

/* ----------------------------------------------------------------
   5bis. TEXTES LECTEURS D'ECRAN : masquage accessible garanti.
   Le theme peut poser .screen-reader-text{display:none} (prix muets
   pour les lecteurs d'ecran) et les ecrans "pure app" Tutor n'ont
   parfois AUCUNE regle (textes affiches en clair). Cette regle
   (0,2,0), chargee apres le theme, retablit le clipping standard.
   ---------------------------------------------------------------- */
.price .screen-reader-text {
    display: inline-block;
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   5ter. GRILLES MASONRY : le theme y applique son texte-degrade avec
   une specificite (0,5,1) qui ecrase tout — contre-regles dediees.
   ---------------------------------------------------------------- */
.masonary-wrapper-activation .rbt-card .rbt-card-bottom .rbt-price .current-price .price ins span,
.masonary-wrapper-activation .rbt-card .rbt-card-bottom .rbt-price .current-price .price del span {
    background: none;
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}
.masonary-wrapper-activation .rbt-card .rbt-card-bottom .rbt-price .current-price span.mu-price-badge {
    background: linear-gradient(135deg, #FFB238 0%, #FF8C00 55%, #F27405 100%);
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #4A2500;
    color: #4A2500;
}
.masonary-wrapper-activation .rbt-card .rbt-card-bottom .rbt-price .current-price span.mu-price-badge-shine {
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 68%);
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

/* ----------------------------------------------------------------
   5quater. DASHBOARD TUTOR (My Courses, Wishlist) : les feuilles
   WooCommerce y sont dequeues — minimum visuel garanti.
   ---------------------------------------------------------------- */
.tutor-dashboard .price ins {
    text-decoration: none;
}
.tutor-dashboard .price del {
    opacity: 0.55;
}

/* ----------------------------------------------------------------
   5quinquies. MODE SOMBRE du theme (.active-dark-mode) : les violets
   fonces deviennent illisibles sur fond sombre — variantes claires.
   ---------------------------------------------------------------- */
.active-dark-mode .rbt-price .current-price .price ins,
.active-dark-mode .rbt-price .current-price .price > .woocommerce-Price-amount {
    color: #C4B5FD;
}
.active-dark-mode .rbt-price .current-price .price del {
    color: #94A3B8;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .active-dark-mode .rbt-price.large-size .current-price .price ins .woocommerce-Price-amount,
    .active-dark-mode .rbt-price.large-size .current-price .price > .woocommerce-Price-amount {
        background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 60%, #8B5CF6 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ----------------------------------------------------------------
   6. ACCESSIBILITE — mouvement reduit : etats finaux directs.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rbt-price .current-price .price del::after,
    .mu-price-badge,
    .mu-price-badge-shine,
    .rbt-price.large-size .current-price .price ins .woocommerce-Price-amount,
    .rbt-price.large-size .current-price .price > .woocommerce-Price-amount,
    .rbt-price-wrapper .rbt-price .current-price .price ins .woocommerce-Price-amount,
    .rbt-price-wrapper .rbt-price .current-price .price > .woocommerce-Price-amount {
        animation: none !important;
    }
    .mu-price-badge-shine {
        display: none;
    }
}