/* ================================================================
   WIDGETS MAISON — remplacement de PowerPack Lite
   ----------------------------------------------------------------
   Voir mu-plugins/mu-pp-widgets.php pour le contexte.

   ⚠️ DEUX PIEGES A NE JAMAIS REOUVRIR (constates en production) :

   1. LE KIT ELEMENTOR REPEINT TOUS LES <button> DU SITE.
      uploads/elementor/css/post-1690.css contient :
        .elementor-kit-1690 button { background-color: var(--e-global-color-accent);  ← #F24080
                                     color; padding: 16px 28px; border-radius: 25px;
                                     border-style; border-width;
                                     font-family; font-size; font-weight; line-height }
      Specificite (0,1,1). Une regle en `.mu-acc__btn` (0,1,0) PERD : l'accordeon
      s'affichait en rose, avec le padding et le rayon du kit.
      -> tous les selecteurs de bouton sont prefixes `.mu-acc .mu-acc__item`
         (0,3,0) ET portent `!important` sur les proprietes que le kit impose.
      NE PAS RACCOURCIR ces selecteurs.

   2. `font-family: 'Tajawal', inherit` EST DU CSS INVALIDE.
      `inherit` ne peut pas figurer dans une liste de polices : le navigateur
      jette la declaration ENTIERE, silencieusement. Les titres arabes
      s'affichaient donc en Mulish. -> pile de polices explicite ci-dessous.

   Palette reprise des reglages d'origine du site (releves en base) :
     violet profond  #41246D   titres
     violet vif      #6E35C3   fond du contenu ouvert
     violet clair    #BC8FFF   bordures
     violet actif    #8943F3
     orange          #FF9616   survol
   ================================================================ */

.mu-acc,
.mu-lg,
.mu-div {
    --mu-violet-fonce: #41246D;
    --mu-violet: #6E35C3;
    --mu-violet-clair: #BC8FFF;
    --mu-violet-actif: #8943F3;
    --mu-orange: #FF9616;
    --mu-trait: #EDE7F8;
    /* Pile complete : Tajawal pour l'arabe, Poppins pour le latin (deja
       chargees par le site), puis les polices systeme. */
    --mu-police: 'Tajawal', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

.mu-acc *,
.mu-lg *,
.mu-div * { box-sizing: border-box; }


/* ================================================================
   1. ACCORDEON
   ================================================================ */
.mu-acc {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Une carte (un <div> : le kit Elementor ne le touche pas) --- */
.mu-acc .mu-acc__item {
    position: relative;
    background: #fff;
    border: 2px solid var(--mu-trait);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease;
}

/* ---- Entree en cascade au defilement ---------------------------
   ⚠️ CONCEPTION « FAIL-OPEN », A NE PAS INVERSER.

   L'etat masque n'est applique QUE sous `html.mu-pp-js`, classe posee
   par l'amorce de mu-pp-widgets.php (voir mu_pp_amorce). Consequences :

   - JavaScript desactive ou bloque  -> la classe n'existe pas,
                                        le contenu s'affiche normalement ;
   - mu-pp.js absent ou en erreur    -> l'amorce pose `mu-pp-secours`
                                        au bout de 3 s, qui revele tout
                                        (voir la regle de secours en fin
                                        de fichier) ;
   - tout va bien                    -> animation au defilement.

   Poser `opacity: 0` directement sur l'element ferait disparaitre le
   contenu de facon definitive a la moindre panne du script. */
html.mu-pp-js .mu-acc .mu-acc__item {
    opacity: 0;
    transform: translateY(18px);
}

html.mu-pp-js .mu-acc.is-visible .mu-acc__item {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease var(--mu-delay, 0s),
                transform .55s cubic-bezier(.22, 1, .36, 1) var(--mu-delay, 0s),
                border-color .3s ease, box-shadow .35s ease;
}

.mu-acc .mu-acc__item:hover {
    border-color: var(--mu-violet-clair);
    box-shadow: 0 10px 28px rgba(110, 53, 195, .10);
}

.mu-acc .mu-acc__item.is-open {
    border-color: var(--mu-violet-clair);
    box-shadow: 0 18px 44px rgba(110, 53, 195, .16);
}

/* Filet degrade sur le bord, revele a l'ouverture. */
.mu-acc .mu-acc__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-acc .mu-acc__item.is-open::before { transform: scaleY(1); }

/* ---- L'en-tete cliquable ---------------------------------------
   Chaque !important repond a une declaration precise du kit Elementor
   citee en tete de fichier. Aucun n'est pose par confort. */
.mu-acc .mu-acc__h { margin: 0 !important; padding: 0 !important; }

.mu-acc .mu-acc__item .mu-acc__btn {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    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-acc .mu-acc__item .mu-acc__btn:hover,
.mu-acc .mu-acc__item .mu-acc__btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--mu-orange) !important;
}

.mu-acc .mu-acc__item.is-open .mu-acc__btn,
.mu-acc .mu-acc__item.is-open .mu-acc__btn:hover {
    color: var(--mu-violet-actif) !important;
}

.mu-acc .mu-acc__item .mu-acc__btn:focus-visible {
    outline: 3px solid var(--mu-violet-actif) !important;
    outline-offset: -3px;
}

/* Pastille d'icone */
.mu-acc .mu-acc__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #F3ECFF, #E4D6FF);
    color: var(--mu-violet);
    font-size: 20px;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                background .3s ease, color .3s ease;
}

.mu-acc .mu-acc__icon svg { width: 20px; height: 20px; fill: currentColor; }
.mu-acc .mu-acc__icon i { font-size: 20px; line-height: 1; }

.mu-acc .mu-acc__btn:hover .mu-acc__icon { transform: rotate(-6deg) scale(1.06); }

.mu-acc .mu-acc__item.is-open .mu-acc__icon {
    background: linear-gradient(135deg, var(--mu-violet-actif), var(--mu-violet));
    color: #fff;
    transform: none;
}

/* Titre */
.mu-acc .mu-acc__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--mu-police) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Chevron */
.mu-acc .mu-acc__chevron {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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-acc .mu-acc__item.is-open .mu-acc__chevron {
    transform: rotate(180deg);
    background: var(--mu-violet-actif);
    color: #fff;
}

/* ---- Le panneau ------------------------------------------------
   L'animation porte sur grid-template-rows : c'est la seule facon
   d'animer vers une hauteur AUTOMATIQUE sans mesurer en JavaScript,
   donc sans saccade quand le contenu change de longueur. */
.mu-acc .mu-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}

.mu-acc .mu-acc__item.is-open .mu-acc__panel { grid-template-rows: 1fr; }

/* `hidden` vaut display:none par defaut : on le neutralise pour que la
   transition puisse jouer (le script retire l'attribut a l'ouverture). */
.mu-acc .mu-acc__panel[hidden] { display: grid; }

.mu-acc .mu-acc__inner {
    overflow: hidden;
    min-height: 0;
    margin: 0 18px 18px;
    padding: 0 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mu-violet), #8B4BD8);
    color: #fff;
    font-family: var(--mu-police);
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.9;
    opacity: 0;
    transition: opacity .3s ease, padding .45s cubic-bezier(.22, 1, .36, 1);
}

.mu-acc .mu-acc__item.is-open .mu-acc__inner {
    padding: 20px;
    opacity: 1;
    transition-delay: .1s;
}

.mu-acc .mu-acc__inner p { margin: 0 0 .8em; color: inherit; }
.mu-acc .mu-acc__inner p:last-child { margin-bottom: 0; }

.mu-acc .mu-acc__inner a:not([class]) {
    color: #FFE08A !important;
    text-decoration: underline;
}
.mu-acc .mu-acc__inner a:not([class]):hover { color: #fff !important; }

/* Bouton d'appel a l'action place dans le contenu : sur fond violet, le
   rose du kit Elementor jurait. On le passe en blanc plein — lisible,
   et visiblement voulu. */
.mu-acc .mu-acc__inner .elementor-button,
.mu-acc .mu-acc__inner a.elementor-button,
.mu-acc .mu-acc__inner .rbt-btn,
.mu-acc .mu-acc__inner button {
    background: #fff !important;
    background-image: none !important;
    color: var(--mu-violet) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-family: var(--mu-police) !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mu-acc .mu-acc__inner .elementor-button:hover,
.mu-acc .mu-acc__inner a.elementor-button:hover,
.mu-acc .mu-acc__inner .rbt-btn:hover,
.mu-acc .mu-acc__inner button:hover {
    background: #FFF6E0 !important;
    color: var(--mu-violet-fonce) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22) !important;
}

@media (max-width: 575.98px) {
    .mu-acc .mu-acc__item .mu-acc__btn { padding: 16px !important; gap: 12px; }
    .mu-acc .mu-acc__icon { width: 40px; height: 40px; border-radius: 12px; }
    .mu-acc .mu-acc__inner { margin: 0 12px 12px; }
    .mu-acc .mu-acc__item.is-open .mu-acc__inner { padding: 16px; }
}


/* ================================================================
   2. GRILLE DE VIGNETTES
   ----------------------------------------------------------------
   Les vignettes sont des <a> : le kit Elementor n'y impose que la
   couleur du texte (sans effet ici, il n'y a qu'une image). Le
   soulignement fantome du theme sur les liens est neutralise plus bas.
   ================================================================ */
.mu-lg {
    --mu-lg-min: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mu-lg-min), 1fr));
    gap: 22px;
}

.mu-lg .mu-lg__item {
    position: relative;
    display: block;
    border-radius: 20px;          /* rayon d'origine conserve */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
    text-decoration: none !important;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s ease;
}

/* Meme conception « fail-open » que pour l'accordeon : sans la classe
   `mu-pp-js` posee par l'amorce, les vignettes restent visibles.
   Voir le commentaire detaille plus haut. */
html.mu-pp-js .mu-lg .mu-lg__item {
    opacity: 0;
    transform: translateY(22px) scale(.97);
}

html.mu-pp-js .mu-lg.is-visible .mu-lg__item {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease var(--mu-delay, 0s),
                transform .6s cubic-bezier(.22, 1, .36, 1) var(--mu-delay, 0s),
                box-shadow .45s ease;
}

.mu-lg .mu-lg__item--link:hover,
.mu-lg .mu-lg__item--link:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(110, 53, 195, .22);
}

.mu-lg .mu-lg__item--link:focus-visible {
    outline: 3px solid var(--mu-violet-actif);
    outline-offset: 3px;
}

.mu-lg .mu-lg__media {
    display: block;
    overflow: hidden;
    border-radius: inherit;
}

.mu-lg .mu-lg__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.mu-lg .mu-lg__item--link:hover .mu-lg__img { transform: scale(1.06); }

/* Reflet qui balaie la vignette au survol.
   `content: none` est impose au ::before pour neutraliser le
   soulignement fantome que le theme dessine sur ses liens. */
.mu-lg .mu-lg__item::before {
    content: none !important;
}

.mu-lg .mu-lg__item--link::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, .42) 50%,
        rgba(255, 255, 255, 0) 65%) !important;
    transform: translateX(-120%);
    pointer-events: none;
}

.mu-lg .mu-lg__item--link:hover::after {
    animation: mu-lg-reflet .85s ease;
}

@keyframes mu-lg-reflet {
    to { transform: translateX(120%); }
}

@media (max-width: 575.98px) {
    .mu-lg { gap: 14px; }
}


/* ================================================================
   3. SEPARATEUR
   ================================================================ */
.mu-div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 24px;
}

/* Le separateur de la page classe-troisieme est transparent : il ne
   sert que d'espacement. On reproduit ce comportement a l'identique. */
.mu-div--vide {
    display: block;
    padding-block: 24px;
}

.mu-div .mu-div__line {
    flex: 1 1 auto;
    height: 0;
    border-top: 2px var(--mu-div-style, solid) var(--mu-div-color, #E4E5EA);
}

.mu-div .mu-div__text {
    flex: 0 0 auto;
    font-family: var(--mu-police);
    font-size: 15px;
    font-weight: 700;
    color: var(--mu-violet-fonce);
    letter-spacing: .3px;
}


/* ================================================================
   4. MOUVEMENT REDUIT
   ----------------------------------------------------------------
   On coupe les animations DECORATIVES, mais l'accordeon doit rester
   fonctionnel : les elements restent visibles.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

    .mu-acc .mu-acc__item,
    .mu-lg .mu-lg__item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mu-acc .mu-acc__panel,
    .mu-acc .mu-acc__inner,
    .mu-acc .mu-acc__icon,
    .mu-acc .mu-acc__chevron,
    .mu-lg .mu-lg__img {
        transition: none !important;
    }

    .mu-acc .mu-acc__item::before { transform: scaleY(1); }

    .mu-lg .mu-lg__item--link:hover::after { animation: none; }
}


/* ================================================================
   5. FILET DE SECURITE
   ----------------------------------------------------------------
   L'amorce placee dans le <head> (mu_pp_amorce, dans
   mu-pp-widgets.php) verifie au bout de 3 secondes que mu-pp.js s'est
   bien execute. Si ce n'est pas le cas — script bloque par une
   extension, cache incomplet, erreur JavaScript d'un autre module —
   elle pose `mu-pp-secours` sur <html> et tout redevient visible.

   Sans ce filet, une panne de mu-pp.js rendrait les pages FAQ,
   Methodes de paiement et les pages de classe entierement blanches.
   ================================================================ */
html.mu-pp-secours .mu-acc .mu-acc__item,
html.mu-pp-secours .mu-lg .mu-lg__item {
    opacity: 1 !important;
    transform: none !important;
}

/* Idem pour les volets : sans script, aucun clic n'ouvre l'accordeon,
   donc on affiche les reponses les unes sous les autres. La page reste
   consultable, simplement sans le pliage. */
html.mu-pp-secours .mu-acc .mu-acc__panel[hidden] {
    display: grid !important;
    grid-template-rows: 1fr !important;
}

html.mu-pp-secours .mu-acc .mu-acc__inner {
    opacity: 1 !important;
    padding: 0 22px 22px !important;
}

html.mu-pp-secours .mu-acc .mu-acc__chevron {
    display: none !important;
}