/**
 * Offres & tarifs — feuille de style du module.
 *
 * =====================================================================
 * CE QUI VIENT DE LA MAQUETTE, CE QUI VIENT DU SITE
 * =====================================================================
 * De la maquette (pricingmu) : la STRUCTURE et le CONTENU — quels blocs,
 * dans quel ordre, avec quelles informations.
 *
 * Du site : TOUT LE RESTE. Police, palette, tailles, rayons, ombres,
 * boutons et animations sont ceux des pages « Méthodes de paiement » et
 * « FAQ », c'est-à-dire ceux de mu-pp-widgets/assets/mu-pp.css. Les
 * jetons ci-dessous en sont la copie littérale : une seule valeur à
 * changer si la charte évolue, et les deux modules restent d'accord.
 *
 * =====================================================================
 * DEUX PIÈGES DÉJÀ PAYÉS — NE PAS LES ROUVRIR
 * =====================================================================
 * 1. LE KIT ELEMENTOR REPEINT TOUS LES <button> DU SITE.
 *    uploads/elementor/css/post-1690.css contient
 *      .elementor-kit-1690 button { background-color:#F24080; color;
 *        padding:16px 28px; border-radius:25px; border-style;
 *        border-width; font-family; font-size; font-weight; line-height }
 *    soit une spécificité (0,1,1). Une règle en `.mu-faq-q` (0,1,0)
 *    PERD : les questions de la FAQ sont sorties en blanc sur blanc, et
 *    la bascule mensuel/annuel en rose. D'où, pour chaque bouton, un
 *    sélecteur à trois classes ET un `!important` sur les propriétés que
 *    le kit impose — aucun n'est posé par confort.
 *    NE PAS RACCOURCIR CES SÉLECTEURS.
 *
 * 2. `font-family: 'Tajawal', inherit` EST DU CSS INVALIDE : `inherit`
 *    ne peut pas figurer dans une liste de polices, et le navigateur
 *    jette la déclaration entière sans rien dire. D'où la pile complète
 *    dans `--mu-police`.
 *
 * =====================================================================
 * CLOISONNEMENT
 * =====================================================================
 * Tout est sous `.mu-offres`. Deux classes du module — `.mu-toggle` et
 * `.mu-price` — existent aussi dans le thème, avec d'autres valeurs :
 * sans ce cloisonnement les deux jeux de règles se marcheraient dessus.
 * Aucun widget n'imprime son balisage hors de ce conteneur.
 *
 * @package Math_Universe
 */

/* =====================================================================
   1. SOCLE
   ===================================================================== */

.mu-offres {
    /* Palette du site — reprise de mu-pp.css, elle-même relevée dans les
       réglages d'origine en base. */
    --mu-violet-fonce: #41246D;   /* titres */
    --mu-violet: #6E35C3;         /* aplats */
    --mu-violet-clair: #BC8FFF;   /* bordures actives */
    --mu-violet-actif: #8943F3;   /* état ouvert, liens */
    --mu-violet-nuit: #501AA2;    /* fond des en-têtes de page */
    --mu-orange: #FF9616;         /* appel à l'action secondaire */
    --mu-orange-fonce: #E07C00;
    --mu-rose: #F24080;           /* accent du kit Elementor du site */
    --mu-rose-fonce: #C92C63;
    --mu-trait: #EDE7F8;          /* filets et bordures au repos */
    --mu-encre-douce: #6F6289;    /* texte courant */
    --mu-fond: #FAF8FE;           /* fond de page, sous l'en-tête */

    --mu-r-carte: 18px;
    --mu-r-douce: 14px;
    --mu-r-pill: 999px;
    --mu-ombre: 0 10px 28px rgba(110, 53, 195, .10);
    --mu-ombre-forte: 0 18px 44px rgba(110, 53, 195, .16);
    /* La courbe d'élan du site, et la couleur de son reflet de survol. */
    --mu-elan: cubic-bezier(.22, 1, .36, 1);
    --mu-reflet: rgba(255, 255, 255, .30);

    /* Pile complète : Tajawal pour l'arabe, Poppins pour le latin (les
       deux sont déjà chargées par le site), puis les polices système. */
    --mu-police: 'Tajawal', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-family: var(--mu-police);
    color: var(--mu-violet-fonce);
    background: var(--mu-fond);
    box-sizing: border-box;

    /* Dans l'éditeur Elementor le widget est enveloppé dans des
       conteneurs qui limitent sa largeur : le décor de l'en-tête doit
       pouvoir déborder sans provoquer de défilement horizontal. */
    overflow-x: clip;
}

.mu-offres * { box-sizing: border-box; }

/* Le thème ET le kit Elementor imposent leurs polices aux titres et aux
   textes (Mulish, Poppins). `!important` parce que `.elementor-kit-1690
   h2` a exactement la même spécificité que `.mu-offres h2` : sans lui, la
   police dépend de l'ordre de chargement des feuilles, donc du hasard. */
.mu-offres h1, .mu-offres h2, .mu-offres h3, .mu-offres h4,
.mu-offres p, .mu-offres span, .mu-offres a, .mu-offres li,
.mu-offres th, .mu-offres td, .mu-offres b, .mu-offres small,
.mu-offres button {
    font-family: var(--mu-police) !important;
}

.mu-offres .mu-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Les quatre widgets s'enchaînent pour ne former qu'une seule page : la
   marge basse que le kit Elementor met sous chaque widget laissait une
   bande blanche entre eux, en plein milieu du fond violet clair.
   Sélecteurs limités à nos quatre widgets : rien d'autre n'est touché. */
.elementor-widget-mu_offres_hero,
.elementor-widget-mu_offres_plans,
.elementor-widget-mu_offres_matieres,
.elementor-widget-mu_offres_faq,
.elementor-widget-mu_offres_contact {
    margin-block-end: 0 !important;
}

/* =====================================================================
   2. EN-TÊTE
   ---------------------------------------------------------------------
   Bandeau violet plein, titre blanc : exactement la façon dont le site
   ouvre « Méthodes de paiement » et « FAQ ». L'élève reconnaît la maison
   avant même d'avoir lu le titre.
   ===================================================================== */

.mu-offres .mu-pricing-hero {
    position: relative;
    padding: 86px 0 74px;
    text-align: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--mu-violet-nuit) 0%, var(--mu-violet) 55%, var(--mu-violet-actif) 100%);
}

/* Trois taches floutées : le décor de la maquette, repeint aux couleurs
   du site. Purement visuelles. */
.mu-offres .mu-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.mu-offres .mu-blob.b1 { width: 420px; height: 420px; background: var(--mu-violet-clair); opacity: .30; top: -170px; left: -110px; }
.mu-offres .mu-blob.b2 { width: 340px; height: 340px; background: var(--mu-orange);      opacity: .18; top: 90px;    right: -130px; }
.mu-offres .mu-blob.b3 { width: 300px; height: 300px; background: var(--mu-rose);        opacity: .16; bottom: -150px; left: 38%; }

.mu-offres .mu-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--mu-r-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    animation: mu-offres-drop .7s .05s cubic-bezier(.22, 1, .36, 1) both;
}

.mu-offres .mu-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mu-orange);
    box-shadow: 0 0 0 4px rgba(255, 150, 22, .3);
}

/* 900 et jusqu'à 60 px : la taille des titres de page du site. */
.mu-offres .mu-pricing-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 22px auto 16px;
    font-size: clamp(30px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.3;
    color: #fff;
    animation: mu-offres-drop .8s .15s cubic-bezier(.22, 1, .36, 1) both;
}

/* Le fragment mis en couleur : sur fond violet, l'orange de la charte
   est le seul accent qui ressorte vraiment. */
.mu-offres .mu-pricing-hero h1 span {
    color: var(--mu-orange);
}

/* Nom de la classe affichée sous le titre : « BAC MATH », « 3EME INFO »…
   C'est ce qui fait qu'un élève reconnaît SA page, et non une page de
   tarifs générique. */
.mu-offres .mu-hero-classe {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0 0 18px;
    padding: 8px 22px;
    border-radius: var(--mu-r-pill);
    background: #fff;
    color: var(--mu-violet-actif);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    animation: mu-offres-drop .8s .2s cubic-bezier(.22, 1, .36, 1) both;
}

.mu-offres .mu-pricing-hero p {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .9);
    animation: mu-offres-drop .8s .28s cubic-bezier(.22, 1, .36, 1) both;
}

.mu-offres .mu-stats {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
    animation: mu-offres-drop .8s .36s cubic-bezier(.22, 1, .36, 1) both;
}

.mu-offres .mu-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--mu-r-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
}

.mu-offres .mu-stat b    { font-size: 22px; font-weight: 900; color: #fff; }
.mu-offres .mu-stat span { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .85); }

/* =====================================================================
   3. BASCULE MENSUEL / ANNUEL
   ===================================================================== */

.mu-offres .mu-toggle-zone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 46px 0 6px;
}

.mu-offres .mu-toggle {
    position: relative;
    display: inline-flex;
    padding: 6px;
    border-radius: var(--mu-r-pill);
    background: #fff;
    border: 2px solid var(--mu-trait);
    box-shadow: var(--mu-ombre);
}

/* ⚠ Trois classes + !important : voir le piège nº 1 en tête de fichier.
   Sans cela le kit Elementor peint ces deux boutons en rose. */
.mu-offres .mu-toggle-zone .mu-toggle button {
    position: relative;
    z-index: 2;
    padding: 12px 30px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--mu-r-pill) !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: var(--mu-police) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--mu-encre-douce) !important;
    transition: color .35s ease;
}

.mu-offres .mu-toggle-zone .mu-toggle button:hover {
    color: var(--mu-violet-actif) !important;
}

.mu-offres .mu-toggle-zone .mu-toggle button.active,
.mu-offres .mu-toggle-zone .mu-toggle button.active:hover {
    color: #fff !important;
}

.mu-offres .mu-toggle-zone .mu-toggle button:focus-visible {
    outline: 3px solid var(--mu-violet-actif) !important;
    outline-offset: -3px;
}

/* La pastille qui glisse sous le libellé actif. */
.mu-offres .mu-toggle .mu-thumb {
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: 6px;
    width: calc(50% - 6px);
    z-index: 1;
    border-radius: var(--mu-r-pill);
    background: linear-gradient(120deg, var(--mu-violet-actif), var(--mu-violet));
    box-shadow: 0 8px 18px -6px rgba(110, 53, 195, .55);
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), background .35s ease;
}

.mu-offres .mu-toggle.annual .mu-thumb {
    transform: translateX(-100%);
    background: linear-gradient(120deg, var(--mu-orange), var(--mu-orange-fonce));
    box-shadow: 0 8px 18px -6px rgba(255, 150, 22, .55);
}

/* Le gain de l'abonnement annuel, en orange : la couleur que le site
   réserve à ce qu'il veut faire remarquer. */
.mu-offres .mu-toggle .badge-save {
    position: absolute;
    /* Physiquement a gauche, et non `inset-inline-start` : le bloc est
       en arabe, donc l'offre annuelle est le bouton de gauche. C'est
       LUI que le badge doit surmonter. */
    top: -24px;
    left: -6px;
    padding: 4px 10px;
    border-radius: var(--mu-r-pill);
    background: var(--mu-orange);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    box-shadow: 0 6px 14px -4px rgba(255, 150, 22, .6);
    transform: rotate(-6deg);
}

/* =====================================================================
   4. CARTES D'OFFRES
   ---------------------------------------------------------------------
   Même carte que l'accordéon des pages « Méthodes de paiement » et
   « FAQ » : fond blanc, filet #EDE7F8 de 2 px, rayon 18 px, et au survol
   la bordure violet clair avec l'ombre portée de la charte.
   ===================================================================== */

.mu-offres .mu-plans-section { padding: 26px 0 10px; }

.mu-offres .mu-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Une offre seule ne doit pas s'étaler sur toute la largeur. */
.mu-offres .mu-plans-grid.mu-single {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

/* ---------------------------------------------------------------------
   LE FILET DÉGRADÉ DU BORD — LIRE AVANT DE TOUCHER AU FOND DE LA CARTE
   ---------------------------------------------------------------------
   DÉFAUT CORRIGÉ ICI. Le filet était un `::before` de 4 px posé en absolu
   sur le bord. La carte n'ayant pas `overflow: hidden`, ce rectangle à
   bouts CARRÉS dépassait du congé de 18 px, en haut et en bas : deux
   ergots parasites, bien visibles au zoom.

   POURQUOI PAS `overflow: hidden`, COMME SUR .mu-acc__item ET .mu-faq-item.
   Parce que le ruban « الأكثر طلبًا » (.mu-ribbon) est volontairement posé
   HORS de la carte (top: -14px) : `overflow: hidden` le trancherait en
   deux. Et parce que mu-offres.js applique à la carte un basculement 3D
   (rotateX/rotateY) : un découpage `overflow` sur un élément transformé en
   3D est justement le cas où Safari iOS laisse fuir les angles arrondis.

   LA SOLUTION. Un FOND est TOUJOURS découpé par le rayon de l'élément qui
   le porte, sans rien demander à personne. Avec `background-clip:
   padding-box`, il est découpé par la courbe INTÉRIEURE — rayon 18 px
   moins la bordure de 2 px, soit 16 px, de même centre : c'est EXACTEMENT
   le tracé que `overflow: hidden` produit sur .mu-acc__item et
   .mu-faq-item. On obtient donc le rendu de la référence au pixel près,
   mais le découpage ne s'applique qu'au FOND — les descendants, ruban
   compris, débordent librement.

   ⚠ CONSÉQUENCE À NE PAS OUBLIER : ÉCRIRE `background: …` (le RACCOURCI)
     SUR .mu-card EFFACE LE FILET, silencieusement. Pour repeindre la
     carte — fond non blanc, mode sombre — ne toucher QUE
     `background-color`. Les cinq déclarations `background-*` ci-dessous
     sont solidaires ; elles se lisent comme un bloc.
   --------------------------------------------------------------------- */

/* `background-position` n'a pas de forme logique : c'est la SEULE valeur
   physique de la solution, et elle est isolée dans cette variable. Le
   module écrit toujours `dir="rtl"` ou `dir="ltr"` sur .mu-offres lui-même
   (voir `mu_offres_ouvrir()` dans mu-offres.php) : les deux cas sont donc
   explicitement couverts, aucun héritage à deviner. La valeur de base
   reprend le sens par défaut du module, l'arabe. */
.mu-offres            { --mu-filet-x: 100%; }  /* RTL : le filet est à droite */
.mu-offres[dir="ltr"] { --mu-filet-x: 0%; }    /* LTR : le filet est à gauche */

.mu-offres .mu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 26px;

    /* --- Le bloc « fond », solidaire. Voir l'avertissement ci-dessus. --- */
    /* Couche du bas : la carte. */
    background-color: #fff;
    /* Couche du haut : le filet, teinté par l'offre (--mu-ton et
       --mu-ton-fonce viennent de .mu-tone-violet / -orange / -rose). */
    background-image: linear-gradient(180deg, var(--mu-ton), var(--mu-ton-fonce));
    background-repeat: no-repeat;
    /* Collé au bord du DÉBUT de la lecture, aligné en haut. */
    background-position: var(--mu-filet-x, 100%) 0;
    /* Au repos : hauteur nulle, donc rien n'est peint. Au survol : pleine
       hauteur. Le bord HAUT du dégradé ne bouge pas, la bande pousse donc
       vers le bas — le geste voulu.
       `0%` et non `0` : deux pourcentages s'interpolent partout, un
       mélange longueur/pourcentage dépend du calc() du moteur. */
    background-size: 4px 0%;
    /* Origine = boîte de rembourrage : la bande fait 4 px VISIBLES, elle
       ne se cache pas à moitié sous la bordure de 2 px. */
    background-origin: padding-box;
    /* LE CŒUR DE LA CORRECTION : découpage sur la courbe intérieure. */
    background-clip: padding-box;

    border: 2px solid var(--mu-trait);
    border-radius: var(--mu-r-carte);
    /* Aucun `var()` dans cette déclaration : une variable absente
       invaliderait la ligne entière et tuerait AUSSI les transitions de
       bordure, d'ombre et de transform. */
    transition: border-color .3s ease,
                box-shadow .35s ease,
                transform .35s ease,
                background-size .4s cubic-bezier(.22, 1, .36, 1);
}

.mu-offres .mu-card:hover {
    border-color: var(--mu-violet-clair);
    box-shadow: var(--mu-ombre);
}

/* L'offre mise en avant : le filet et l'ombre de l'état « ouvert » de
   l'accordéon du site, plus un léger relèvement. */
.mu-offres .mu-card.mu-featured {
    border-color: var(--mu-violet-clair);
    box-shadow: var(--mu-ombre-forte);
}

/* Le filet, révélé au survol et permanent sur l'offre mise en avant. */
.mu-offres .mu-card:hover,
.mu-offres .mu-card.mu-featured { background-size: 4px 100%; }

/* Les trois teintes d'offre reprennent les trois accents de la charte :
   violet (la couleur de la marque), orange (ce qu'on met en avant) et
   rose (l'accent du kit Elementor du site). */
.mu-offres .mu-card.mu-tone-violet { --mu-ton: var(--mu-violet-actif); --mu-ton-fonce: var(--mu-violet); --mu-ton-voile: rgba(137, 67, 243, .12); }
.mu-offres .mu-card.mu-tone-orange { --mu-ton: var(--mu-orange);       --mu-ton-fonce: var(--mu-orange-fonce); --mu-ton-voile: rgba(255, 150, 22, .14); }
.mu-offres .mu-card.mu-tone-rose   { --mu-ton: var(--mu-rose);         --mu-ton-fonce: var(--mu-rose-fonce);   --mu-ton-voile: rgba(242, 64, 128, .12); }

/* Repli : une offre sans teinte choisie prend le violet de la marque. */
.mu-offres .mu-card { --mu-ton: var(--mu-violet-actif); --mu-ton-fonce: var(--mu-violet); --mu-ton-voile: rgba(137, 67, 243, .12); }

.mu-offres .mu-ribbon {
    position: absolute;
    top: -14px;
    inset-inline-end: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--mu-r-pill);
    background: linear-gradient(120deg, var(--mu-ton), var(--mu-ton-fonce));
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: 0 8px 18px -6px rgba(65, 36, 109, .4);
}

.mu-offres .mu-ribbon svg { width: 13px; height: 13px; }
.mu-offres .mu-ribbon i   { font-size: 13px; line-height: 1; }

.mu-offres .mu-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mu-offres .mu-plan-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--mu-violet-fonce);
}

/* Pastille d'icône : celle de l'accordéon du site, teintée par l'offre. */
.mu-offres .mu-plan-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mu-r-douce);
    background: var(--mu-ton-voile);
    color: var(--mu-ton-fonce);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .3s ease, color .3s ease;
}

.mu-offres .mu-card:hover .mu-plan-icon {
    transform: rotate(-6deg) scale(1.06);
    background: linear-gradient(135deg, var(--mu-ton), var(--mu-ton-fonce));
    color: #fff;
}

/* Les icônes de la bibliothèque d'Elementor arrivent soit en SVG, soit
   en police d'icônes (<i>) : ces règles alignent les deux cas. */
.mu-offres .mu-plan-icon svg { width: 22px; height: 22px; fill: currentColor; }
.mu-offres .mu-plan-icon i   { font-size: 21px; line-height: 1; color: inherit; }

.mu-offres .mu-plan-sub {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--mu-encre-douce);
}

.mu-offres .mu-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
}

.mu-offres .mu-price {
    font-size: clamp(38px, 4.4vw, 48px);
    font-weight: 900;
    line-height: 1;
    color: var(--mu-ton-fonce);
}

.mu-offres .mu-currency {
    font-size: 17px;
    font-weight: 800;
    color: var(--mu-ton-fonce);
}

.mu-offres .mu-period {
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mu-encre-douce);
}

.mu-offres .mu-scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 7px 15px;
    border-radius: var(--mu-r-pill);
    background: var(--mu-ton-voile);
    color: var(--mu-ton-fonce);
    font-size: 13.5px;
    font-weight: 800;
}

.mu-offres .mu-scope-badge svg { width: 15px; height: 15px; fill: currentColor; }
.mu-offres .mu-scope-badge i   { font-size: 14px; line-height: 1; }

.mu-offres .mu-features {
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}

.mu-offres .mu-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--mu-violet-fonce);
    border-bottom: 1px solid var(--mu-trait);
}

.mu-offres .mu-features li:last-child { border-bottom: 0; }

/* Un avantage non inclus reste lisible mais visiblement en retrait :
   le barrer serait illisible en arabe. */
.mu-offres .mu-features li.no { color: var(--mu-encre-douce); opacity: .72; }

.mu-offres .mu-features .ic {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.mu-offres .mu-features .ic svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mu-offres .mu-features li.yes .ic { background: rgba(137, 67, 243, .13); color: var(--mu-violet-actif); }
.mu-offres .mu-features li.no  .ic { background: #F1EEF6; color: #A79BBD; }

/* ⚠ Trois classes + !important : le kit Elementor impose aussi sa
   couleur aux liens. Voir le piège nº 1 en tête de fichier. */
.mu-offres .mu-card .mu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: auto;
    padding: 16px 28px !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: linear-gradient(120deg, var(--mu-ton), var(--mu-ton-fonce)) !important;
    color: #fff !important;
    font-family: var(--mu-police) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 26px -12px rgba(65, 36, 109, .55);
}

/* Survol, état actif et anneau de focus : voir le vocabulaire commun,
   section 8. Rien de spécifique ici. */

.mu-offres .mu-card .mu-cta svg { width: 18px; height: 18px; }
.mu-offres .mu-card .mu-cta i   { font-size: 16px; line-height: 1; }

/* En RTL la flèche du bouton doit pointer vers la gauche. */
.mu-offres[dir="rtl"] .mu-card .mu-cta svg { transform: scaleX(-1); }

/* =====================================================================
   5. TABLEAU COMPARATIF
   ===================================================================== */

.mu-offres .mu-compare-wrap {
    position: relative;
    z-index: 1;
    margin: 38px 0 10px;
    text-align: center;
}

/* ⚠ Trois classes + !important : voir le piège nº 1. */
.mu-offres .mu-compare-wrap .mu-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px !important;
    background: #fff !important;
    background-image: none !important;
    border: 2px solid var(--mu-trait) !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: var(--mu-police) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--mu-violet-fonce) !important;
    /* Bouton clair : un reflet blanc ne s'y verrait pas. */
    --mu-reflet: rgba(137, 67, 243, .16);
}

.mu-offres .mu-compare-wrap .mu-compare-btn:hover {
    border-color: var(--mu-violet-clair) !important;
    color: var(--mu-violet-actif) !important;
}

.mu-offres .mu-compare-wrap .mu-compare-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .35s ease;
}

.mu-offres .mu-compare-wrap .mu-compare-btn.open svg { transform: rotate(180deg); }

.mu-offres .mu-compare-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
}

/* Un plafond chiffré est indispensable : une transition ne sait pas
   animer vers `auto`. 2400 px laissent passer une douzaine de lignes
   et quatre offres, bien au-delà de ce que la page affiche. */
.mu-offres .mu-compare-panel.open { max-height: 2400px; }

.mu-offres .mu-compare-inner { padding: 28px 0 10px; }

/* Un tableau à cinq colonnes ne tient pas sur un téléphone : il défile
   dans sa propre boîte, jamais la page. */
.mu-offres .mu-table-wrap {
    overflow-x: auto;
    border-radius: var(--mu-r-carte);
    border: 2px solid var(--mu-trait);
    background: #fff;
}

.mu-offres table.mu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.mu-offres table.mu-table thead th {
    padding: 16px 12px;
    background: var(--mu-violet-fonce);
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.mu-offres table.mu-table thead th.mu-th-violet { background: var(--mu-violet-actif); }
.mu-offres table.mu-table thead th.mu-th-orange { background: var(--mu-orange-fonce); }
.mu-offres table.mu-table thead th.mu-th-rose   { background: var(--mu-rose-fonce); }

.mu-offres table.mu-table tbody td {
    padding: 13px 12px;
    text-align: center;
    border-top: 1px solid var(--mu-trait);
    color: var(--mu-violet-fonce);
}

.mu-offres table.mu-table tbody td:first-child {
    text-align: start;
    font-weight: 600;
    color: var(--mu-encre-douce);
}

.mu-offres table.mu-table tbody tr:nth-child(even) td { background: #FBF9FE; }

.mu-offres .mu-icell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.mu-offres .mu-icell svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mu-offres .mu-icell.yes { background: rgba(137, 67, 243, .13); color: var(--mu-violet-actif); }
.mu-offres .mu-icell.no  { background: #F1EEF6; color: #A79BBD; }

.mu-offres table.mu-table td.mu-table-price {
    font-weight: 900;
    color: var(--mu-violet-actif);
}

.mu-offres table.mu-table td.mu-table-price small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mu-encre-douce);
}

/* =====================================================================
   5 bis. LES MATIÈRES
   ---------------------------------------------------------------------
   Une grille de carreaux carrés : un par matière, avec son nom, et rien
   d'autre. Volontairement PAS un second accordéon — la page en a déjà un
   avec les questions fréquentes, et on ne fait pas cliquer un élève pour
   lire une liste de noms.

   Le carreau reprend la carte du site — fond blanc, filet clair, rayon
   de 18 px, ombre violette — et son geste de survol : la levée de 4 px
   et le reflet qui balaie, exactement comme les boutons d'action (§ 8).

   Numérotée « 5 bis » et non « 6 » : les numéros suivants sont cités
   ailleurs — mu-offres.js renvoie au § 8 « fail-open » — et les
   renuméroter casserait ces renvois.
   ===================================================================== */

.mu-offres .mu-mat {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 70px auto 0;
    padding: 0 24px;
}

.mu-offres .mu-mat h2 {
    margin: 0 0 10px;
    text-align: center;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
    color: var(--mu-violet-fonce);
}

.mu-offres .mu-mat-chapeau {
    max-width: 620px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: clamp(15px, 1.7vw, 17px);
    line-height: 1.8;
    color: var(--mu-encre-douce);
}

/* CINQ CARREAUX PAR LIGNE sur un grand écran, et le compte s'ajuste
   tout seul en dessous : la largeur utile de la section est de 952 px
   (1000 moins les 24 px de marge de chaque côté), soit exactement
   5 x 176 + 4 x 18. `auto-fit` compte donc cinq colonnes ici, quatre ou
   trois sur une tablette, deux sur un téléphone — sans une seule règle
   de rupture à maintenir.

   Les DEUX bornes comptent. Sans la borne haute (176 px), deux matières
   se partageraient toute la largeur et, le carreau étant carré, on
   obtiendrait deux pavés de 470 px de côté.

   `auto-fit` (et non `auto-fill`) escamote les colonnes vides :
   deux matières donnent deux carreaux CENTRÉS, pas deux carreaux collés
   à gauche d'une rangée de cinq. Le gestionnaire peut en saisir autant
   qu'il veut, la grille reste équilibrée. */
.mu-offres .mu-mat-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 176px));
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mu-offres .mu-mat-carreau {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Le carré, quel que soit le nombre de colonnes. */
    aspect-ratio: 1 / 1;
    padding: 18px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--mu-trait);
    border-radius: var(--mu-r-carte);
    box-shadow: var(--mu-ombre);
    transition: transform .45s var(--mu-elan),
                box-shadow .45s var(--mu-elan),
                border-color .3s ease;
}

/* Deux taches de couleur en fond, une par coin : elles donnent du relief
   au carreau sans y ajouter le moindre élément à lire. `z-index: -1` les
   maintient sous le nom, `overflow: hidden` les borne au carreau. */
.mu-offres .mu-mat-carreau::before,
.mu-offres .mu-mat-carreau::after {
    content: "";
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: -1;
    transition: transform .55s var(--mu-elan);
}

.mu-offres .mu-mat-carreau::before {
    inset-inline-start: -22%;
    inset-block-start: -22%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 150, 22, .16), rgba(255, 150, 22, 0) 72%);
}

.mu-offres .mu-mat-carreau::after {
    inset-inline-end: -24%;
    inset-block-end: -24%;
    background: radial-gradient(circle at 65% 65%, rgba(110, 53, 195, .15), rgba(110, 53, 195, 0) 72%);
}

.mu-offres .mu-mat-carreau:hover {
    transform: translateY(-6px);
    border-color: var(--mu-violet-clair);
    box-shadow: var(--mu-ombre-forte);
}

.mu-offres .mu-mat-carreau:hover::before,
.mu-offres .mu-mat-carreau:hover::after { transform: scale(1.3); }

.mu-offres .mu-mat-nom {
    font-family: var(--mu-police) !important;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;
    line-height: 1.5;
    color: var(--mu-violet-fonce);
    transition: color .3s ease;
}

.mu-offres .mu-mat-carreau:hover .mu-mat-nom { color: var(--mu-violet-actif); }

/* Arrivée en cascade. Même image-clé que les cartes d'offres (§ 8) : le
   module n'a qu'un vocabulaire d'apparition. `--mu-delai` est posé par le
   widget, une valeur par carreau ; la classe `.mu-in`, elle, vient du
   script — sans script, pas d'animation et la grille s'affiche
   normalement. C'est le « fail-open » du § 8. */
.mu-offres .mu-mat-carreau.mu-in {
    animation: mu-offres-card-in .55s var(--mu-elan) var(--mu-delai, 0s) both;
}

/* =====================================================================
   6. QUESTIONS FRÉQUENTES
   ---------------------------------------------------------------------
   Copie conforme de l'accordéon des pages « Méthodes de paiement » et
   « FAQ » : carte blanche, filet dégradé à l'ouverture, et la réponse
   sur un aplat violet.
   ===================================================================== */

.mu-offres .mu-faq {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 70px auto 0;
    padding: 0 24px;
}

.mu-offres .mu-faq h2 {
    margin: 0 0 28px;
    text-align: center;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
    color: var(--mu-violet-fonce);
}

.mu-offres .mu-faq-item {
    position: relative;
    margin-bottom: 14px;
    background: #fff;
    border: 2px solid var(--mu-trait);
    border-radius: var(--mu-r-carte);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .35s ease;
}

.mu-offres .mu-faq-item:hover  { border-color: var(--mu-violet-clair); box-shadow: var(--mu-ombre); }
.mu-offres .mu-faq-item.open   { border-color: var(--mu-violet-clair); box-shadow: var(--mu-ombre-forte); }

.mu-offres .mu-faq-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mu-violet-clair), var(--mu-violet));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    z-index: 1;
}

.mu-offres .mu-faq-item.open::before { transform: scaleY(1); }

/* ⚠ Quatre classes + !important : c'est CE bouton-là que le kit
   Elementor peignait en blanc sur blanc. Voir le piège nº 1. */
.mu-offres .mu-faq .mu-faq-item .mu-faq-q {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: start !important;
    font-family: var(--mu-police) !important;
    font-size: clamp(17px, 2.1vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    color: var(--mu-violet-fonce) !important;
    transition: color .25s ease;
}

.mu-offres .mu-faq .mu-faq-item .mu-faq-q:hover,
.mu-offres .mu-faq .mu-faq-item .mu-faq-q:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--mu-orange) !important;
}

.mu-offres .mu-faq .mu-faq-item.open .mu-faq-q,
.mu-offres .mu-faq .mu-faq-item.open .mu-faq-q:hover {
    color: var(--mu-violet-actif) !important;
}

.mu-offres .mu-faq .mu-faq-item .mu-faq-q:focus-visible {
    outline: 3px solid var(--mu-violet-actif) !important;
    outline-offset: -3px;
}

/* Le « + » dans sa pastille ronde, comme le chevron du site. */
.mu-offres .mu-faq-q svg {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 50%;
    background: #F5F1FC;
    color: var(--mu-violet);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, color .3s ease;
}

.mu-offres .mu-faq-item.open .mu-faq-q svg {
    transform: rotate(45deg);
    background: var(--mu-violet-actif);
    color: #fff;
}

/* La hauteur est pilotée en JavaScript (max-height) : ne pas remplacer
   par une grille sans adapter mu-offres.js. */
.mu-offres .mu-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
}

.mu-offres .mu-faq-a p {
    margin: 0 18px 18px;
    padding: 20px;
    border-radius: var(--mu-r-douce);
    background: linear-gradient(135deg, var(--mu-violet), #8B4BD8);
    color: #fff;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.9;
}

/* =====================================================================
   7. BANDEAU DE CONTACT
   ===================================================================== */

.mu-offres .mu-footer-cta {
    position: relative;
    z-index: 1;
    max-width: 940px;
    margin: 70px auto 60px;
    padding: 46px 34px;
    border-radius: 28px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mu-violet-nuit), var(--mu-violet) 60%, var(--mu-violet-actif));
    box-shadow: 0 30px 60px -24px rgba(80, 26, 162, .5);
}

.mu-offres .mu-footer-cta h3 {
    margin: 0 0 10px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 900;
    color: #fff;
}

.mu-offres .mu-footer-cta p {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .92);
}

.mu-offres .mu-footer-btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* Les boutons de contact du pied de page du site : pastille orange pour
   l'action principale, violet pour la secondaire. Ici le blanc les
   remplace sur l'aplat violet — c'est la solution déjà retenue dans
   l'accordéon (mu-pp.css), où le rose du kit jurait de la même façon. */
.mu-offres .mu-footer-cta .mu-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 16px 28px !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--mu-violet) !important;
    font-family: var(--mu-police) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
    /* Bouton blanc : le reflet doit être violet pour se voir. */
    --mu-reflet: rgba(137, 67, 243, .18);
}

.mu-offres .mu-footer-cta .mu-fbtn:hover {
    background: #FFF6E0 !important;
    color: var(--mu-violet-fonce) !important;
}

/* Sur fond violet, l'anneau de focus doit être blanc pour se détacher. */
.mu-offres .mu-footer-cta .mu-fbtn:focus-visible {
    outline-color: #fff !important;
}

/* WhatsApp garde son vert : c'est ce qui le rend reconnaissable au
   premier coup d'œil, y compris pour qui ne lit pas le libellé. */
.mu-offres .mu-footer-cta .mu-fbtn.mu-wa {
    background: #25D366 !important;
    color: #fff !important;
    --mu-reflet: rgba(255, 255, 255, .34);
}

.mu-offres .mu-footer-cta .mu-fbtn.mu-wa:hover {
    background: #1EBE5A !important;
    color: #fff !important;
}

.mu-offres .mu-footer-cta .mu-fbtn svg { width: 18px; height: 18px; }
.mu-offres .mu-footer-cta .mu-fbtn i   { font-size: 18px; line-height: 1; }

/* =====================================================================
   8. ANIMATIONS
   ---------------------------------------------------------------------
   ⚠ CONCEPTION « FAIL-OPEN », À NE PAS INVERSER.
   Aucun élément n'est masqué au repos. L'apparition passe par des
   animations en `both` : c'est l'animation elle-même qui porte l'état
   initial, le temps qu'elle dure. Si le JavaScript ne s'exécute pas —
   extension, erreur d'un autre module, cache incomplet — les cartes
   restent simplement visibles, sans cascade. Poser `opacity: 0` sur les
   cartes ferait disparaître la page entière à la moindre panne.
   ===================================================================== */

/* ---------------------------------------------------------------------
   LE GESTE DE SURVOL DU SITE, POUR LES TROIS BOUTONS D'ACTION
   ---------------------------------------------------------------------
   Copie fidèle de `.mu-appel__bouton` (mu-contacts/assets/mu-contacts.css),
   le bouton orange « إتصل بي » : pilule de 25 px, 16/28 de marge
   intérieure, et au survol une levée de 4 px accompagnée d'un reflet qui
   balaie la surface une fois. Le site n'a qu'UN vocabulaire d'animation
   de bouton ; en inventer un second ici se verrait immédiatement.

   `isolation: isolate` + `z-index: -1` : le reflet passe au-dessus du fond
   du bouton mais reste sous son libellé. `overflow: hidden` le borne à la
   pilule.

   Le survol et le focus CLAVIER lèvent le bouton ; le focus SOURIS, non —
   un bouton qui resterait soulevé après un clic donnerait l'impression
   d'être encore survolé. C'est la même distinction que dans mu-contacts.
   --------------------------------------------------------------------- */

.mu-offres .mu-card .mu-cta,
.mu-offres .mu-compare-wrap .mu-compare-btn,
.mu-offres .mu-footer-cta .mu-fbtn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .45s var(--mu-elan),
                box-shadow .45s var(--mu-elan),
                border-color .3s ease,
                color .3s ease,
                background-color .3s ease;
}

.mu-offres .mu-card .mu-cta::before,
.mu-offres .mu-compare-wrap .mu-compare-btn::before,
.mu-offres .mu-footer-cta .mu-fbtn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 38%,
        var(--mu-reflet) 50%,
        rgba(255, 255, 255, 0) 62%);
    transform: translateX(-130%);
    pointer-events: none;
}

.mu-offres .mu-card .mu-cta:hover::before,
.mu-offres .mu-card .mu-cta:focus-visible::before,
.mu-offres .mu-compare-wrap .mu-compare-btn:hover::before,
.mu-offres .mu-compare-wrap .mu-compare-btn:focus-visible::before,
.mu-offres .mu-footer-cta .mu-fbtn:hover::before,
.mu-offres .mu-footer-cta .mu-fbtn:focus-visible::before {
    animation: mu-offres-reflet .9s ease;
}

@keyframes mu-offres-reflet {
    to { transform: translateX(130%); }
}

.mu-offres .mu-card .mu-cta:hover,
.mu-offres .mu-card .mu-cta:focus-visible,
.mu-offres .mu-compare-wrap .mu-compare-btn:hover,
.mu-offres .mu-compare-wrap .mu-compare-btn:focus-visible,
.mu-offres .mu-footer-cta .mu-fbtn:hover,
.mu-offres .mu-footer-cta .mu-fbtn:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(65, 36, 109, .32),
                0 4px 12px rgba(0, 0, 0, .22);
}

.mu-offres .mu-card .mu-cta:active,
.mu-offres .mu-compare-wrap .mu-compare-btn:active,
.mu-offres .mu-footer-cta .mu-fbtn:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(65, 36, 109, .26);
}

/* Focus souris : aucun anneau, il serait parasite. Focus clavier : un
   anneau franc — c'est tout l'intérêt de `:focus-visible`. */
.mu-offres .mu-card .mu-cta:focus,
.mu-offres .mu-compare-wrap .mu-compare-btn:focus,
.mu-offres .mu-footer-cta .mu-fbtn:focus {
    outline: none;
}

.mu-offres .mu-card .mu-cta:focus-visible,
.mu-offres .mu-compare-wrap .mu-compare-btn:focus-visible,
.mu-offres .mu-footer-cta .mu-fbtn:focus-visible {
    outline: 3px solid var(--mu-violet-actif) !important;
    outline-offset: 3px;
}

@keyframes mu-offres-drop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mu-offres-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* `--mu-delai` est posé par mu-offres.js, une valeur par carte, pour la
   cascade. Sans script : pas de classe, donc pas d'animation, et la
   carte s'affiche normalement. */
.mu-offres .mu-card.mu-in {
    animation: mu-offres-card-in .6s cubic-bezier(.22, 1, .36, 1) var(--mu-delai, 0s) both;
}

/* =====================================================================
   9. ÉCRANS ÉTROITS
   ===================================================================== */

@media (max-width: 767.98px) {
    .mu-offres .mu-pricing-hero { padding: 60px 0 52px; }
    .mu-offres .mu-wrap { padding: 0 16px; }
    .mu-offres .mu-plans-grid { grid-template-columns: 1fr; gap: 18px; }
    .mu-offres .mu-card { padding: 26px 20px 22px; }
    .mu-offres .mu-mat { padding: 0 16px; }
    .mu-offres .mu-mat-grille { grid-template-columns: repeat(auto-fit, minmax(140px, 165px)); gap: 12px; }
    .mu-offres .mu-mat-carreau { padding: 12px; }

    .mu-offres .mu-faq { padding: 0 16px; }
    .mu-offres .mu-faq .mu-faq-item .mu-faq-q { padding: 16px !important; gap: 12px; }
    .mu-offres .mu-faq-a p { margin: 0 12px 12px; padding: 16px; }
    .mu-offres .mu-footer-cta { padding: 34px 20px; margin: 50px auto 40px; }
    .mu-offres table.mu-table { font-size: 13.5px; }
    .mu-offres table.mu-table thead th,
    .mu-offres table.mu-table tbody td { padding: 10px 8px; }
}

@media (max-width: 480px) {
    .mu-offres .mu-toggle-zone .mu-toggle button { padding: 11px 20px !important; font-size: 14.5px !important; }
    .mu-offres .mu-stat { padding: 10px 16px; }
}

/* =====================================================================
   10. MOUVEMENT RÉDUIT
   ---------------------------------------------------------------------
   On coupe les animations décoratives du module — et de lui seul, pas de
   la page qui l'accueille — sans jamais rien rendre invisible.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mu-offres *,
    .mu-offres .mu-card.mu-in {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
    }

    /* Mouvement réduit : le filet reste VISIBLE en permanence, il
       n'est jamais masqué. Même spécificité que la règle de base
       (0,2,0) mais plus bas dans la feuille : elle gagne. */
    .mu-offres .mu-card { background-size: 4px 100%; }

    /* La FAQ garde son ::before : elle porte `overflow: hidden`, elle
       rend déjà correctement, et elle ne subit aucun transform 3D. */
    .mu-offres .mu-faq-item.open::before { transform: scaleY(1); }
    .mu-offres .mu-mat-carreau:hover::before,
    .mu-offres .mu-mat-carreau:hover::after { transform: none; }

    .mu-offres .mu-card .mu-cta::before,
    .mu-offres .mu-compare-wrap .mu-compare-btn::before,
    .mu-offres .mu-footer-cta .mu-fbtn::before { animation: none !important; }
}