/* =========================================================
   MANHAJIYYA DESERT : couche decorative et animations.

   Structure, couleurs, typo et espacements se reglent dans Elementor.
   Ce fichier ne porte que ce que l'editeur visuel ne sait pas exprimer.

   NOTE : Elementor n'applique la classe CSS personnalisee qu'aux WIDGETS,
   pas aux conteneurs. Les conteneurs sont donc cibles par [data-id],
   qui est stable tant que l'element n'est pas supprime puis recree.
   ========================================================= */

:root {
  --mh-ease: cubic-bezier(.19, 1, .22, 1);
}

/* ---------------------------------------------------------
   1. Mise en valeur doree dans les titres
   --------------------------------------------------------- */
.mh-em em,
.mh-em i {
  /* Plus Jakarta Sans possede de vrais italiques dessines :
     l'emphase peut donc etre un italique franc, jamais un oblique synthetique. */
  font-style: italic;
  font-weight: 600;
  color: #BF9B30;
  /* Plage de dores volontairement resserree : un or trop clair perdrait
     le contraste sur le fond creme. */
  background-image: linear-gradient(100deg, #8F6E1D 0%, #A8862A 26%, #D2AE49 50%, #A8862A 74%, #8F6E1D 100%);
  background-size: 260% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mh-shimmer 7s linear infinite;
}

@keyframes mh-shimmer {
  to { background-position: 260% 0; }
}

/* ---------------------------------------------------------
   2. Halo solaire du heros
   --------------------------------------------------------- */
.e-con[data-id="mhhero01"] {
  position: relative;
  overflow: hidden;
}
.e-con[data-id="mhhero01"]::before {
  content: "";
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Halo adouci et decale vers le creme : un or trop franc rendait
     le haut de page jaune. La chaleur vient de la lumiere, pas de la teinte. */
  background: radial-gradient(circle, rgba(238, 216, 176, .5) 0%, rgba(236, 212, 168, .18) 44%, rgba(236, 212, 168, 0) 70%);
  transform: translate(-50%, 0) scale(1);
  animation: mh-sun 11s ease-in-out infinite;
}

/* Clarte rasante juste au-dessus de la dune : detache la crete
   et donne de la profondeur atmospherique au bas du heros. */
.e-con[data-id="mhhero01"]::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(255, 253, 247, .92) 0%, rgba(255, 253, 247, .42) 38%, rgba(255, 253, 247, 0) 72%);
}
.e-con[data-id="mhhero01"] > .e-con-inner {
  position: relative;
  z-index: 1;
}

@keyframes mh-sun {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: .95; }
  50%      { transform: translate(-50%, -2%) scale(1.09); opacity: .72; }
}

/* ---------------------------------------------------------
   3. Motif de losanges or sur les aplats vert foret
   --------------------------------------------------------- */
.e-con[data-id="mhpar001"],
.e-con[data-id="mhhad001"],
.e-con[data-id="mhcta001"],
.e-con[data-id="mhmet020"],
.e-con[data-id="mhmet040"],
.e-con[data-id="mhprg010"] {
  position: relative;
  overflow: hidden;
}
.e-con[data-id="mhpar001"]::before,
.e-con[data-id="mhhad001"]::before,
.e-con[data-id="mhcta001"]::before,
.e-con[data-id="mhmet020"]::before,
.e-con[data-id="mhmet040"]::before,
.e-con[data-id="mhprg010"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Lumiere doree rasante : donne du relief a l'aplat sans le charger.
     Remplace l'ancien tapis de losanges, qui faisait papier peint. */
  background:
    radial-gradient(58% 76% at 18% 8%, rgba(226, 201, 121, .17) 0%, rgba(226, 201, 121, 0) 62%),
    radial-gradient(46% 62% at 88% 96%, rgba(191, 155, 48, .13) 0%, rgba(191, 155, 48, 0) 66%);
  animation: mh-glow 22s ease-in-out infinite;
}
.e-con[data-id="mhpar001"] > .e-con-inner,
.e-con[data-id="mhhad001"] > .e-con-inner,
.e-con[data-id="mhcta001"] > .e-con-inner {
  position: relative;
  z-index: 1;
}
.e-con[data-id="mhmet020"] > *,
.e-con[data-id="mhmet040"] > *,
.e-con[data-id="mhprg010"] > * {
  position: relative;
  z-index: 1;
}

/* Un seul tres grand losange en filet, decentre et coupe par le bord :
   filigrane de marque, pas remplissage. Rappelle le cadre carre du logo,
   pivote a 45 degres. Uniquement sur les grandes sections sombres. */
.e-con[data-id="mhpar001"]::after,
.e-con[data-id="mhhad001"]::after,
.e-con[data-id="mhcta001"]::after {
  content: "";
  position: absolute;
  right: -180px;
  top: 50%;
  width: 720px;
  height: 720px;
  pointer-events: none;
  z-index: 0;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e2c979' stroke-width='.9'%3E%3Cpath d='M100 4 L196 100 L100 196 L4 100 Z'/%3E%3Cpath d='M100 26 L174 100 L100 174 L26 100 Z'/%3E%3Cpath d='M100 52 L148 100 L100 148 L52 100 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(0deg);
  animation: mh-turn 90s linear infinite;
}

@media (max-width: 767px) {
  .e-con[data-id="mhpar001"]::after,
  .e-con[data-id="mhhad001"]::after,
  .e-con[data-id="mhcta001"]::after {
    width: 420px;
    height: 420px;
    right: -150px;
    opacity: .06;
  }
}

@keyframes mh-glow {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

@keyframes mh-turn {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ---------------------------------------------------------
   4. Cartes : survol souleve, ombre teintee verte
   --------------------------------------------------------- */
.e-con[data-id="mhmet011"],
.e-con[data-id="mhmet034"],
.e-con[data-id^="mhprg1"],
.e-con[data-id^="mhblo1"] {
  transition:
    transform .5s var(--mh-ease),
    box-shadow .5s var(--mh-ease),
    border-color .4s ease;
  will-change: transform;
}
.e-con[data-id="mhmet011"]:hover,
.e-con[data-id="mhmet034"]:hover,
.e-con[data-id^="mhprg1"]:hover,
.e-con[data-id^="mhblo1"]:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 52px -20px rgba(27, 51, 36, .38);
  border-color: rgba(191, 155, 48, .55) !important;
}

/* Filet dore qui se deploie sur le flanc des fiches programme */
.e-con[data-id^="mhprg1"] {
  position: relative;
  overflow: hidden;
}
.e-con[data-id^="mhprg1"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #E2C979, #1B3324);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--mh-ease);
}
.e-con[data-id^="mhprg1"]:hover::after {
  transform: scaleY(1);
}

/* ---------------------------------------------------------
   5. Visuels du blog : zoom lent au survol de la carte
   --------------------------------------------------------- */
.e-con[data-id^="mhblo2"] {
  transition: transform .8s var(--mh-ease);
  will-change: transform;
}
.e-con[data-id^="mhblo1"]:hover .e-con[data-id^="mhblo2"] {
  transform: scale(1.06);
}

/* ---------------------------------------------------------
   6. Rangees des parcours : le numero s'anime au survol
   --------------------------------------------------------- */
.e-con[data-id^="mhpar1"] .elementor-element[data-id^="mhpar3"] .elementor-heading-title {
  display: inline-block;
  transition: transform .5s var(--mh-ease), opacity .4s ease;
  opacity: .75;
}
.e-con[data-id^="mhpar1"]:hover .elementor-element[data-id^="mhpar3"] .elementor-heading-title {
  transform: translateY(-4px) scale(1.08);
  opacity: 1;
}

/* ---------------------------------------------------------
   7. Pastilles des savants
   --------------------------------------------------------- */
.elementor-element[data-id^="mhsav1"] {
  transition:
    transform .45s var(--mh-ease),
    background-color .45s ease,
    border-color .45s ease,
    box-shadow .45s var(--mh-ease);
}
.elementor-element[data-id^="mhsav1"]:hover {
  transform: translateY(-5px);
  background-color: #1B3324 !important;
  border-color: #BF9B30 !important;
  box-shadow: 0 16px 34px -16px rgba(27, 51, 36, .5);
}
.elementor-element[data-id^="mhsav1"]:hover .elementor-heading-title {
  color: #E2C979 !important;
}
.elementor-element[data-id^="mhsav1"] .elementor-heading-title {
  transition: color .45s ease;
}

/* ---------------------------------------------------------
   8. Boutons : leger soulevement en plus du changement de couleur
   --------------------------------------------------------- */
.elementor-button {
  transition:
    transform .4s var(--mh-ease),
    background-color .4s ease,
    color .4s ease,
    border-color .4s ease,
    box-shadow .4s var(--mh-ease);
}
.elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(27, 51, 36, .45);
}

/* ---------------------------------------------------------
   9. Puces losange des listes de contenu
   --------------------------------------------------------- */
.mh-diamond ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mh-diamond li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
}
.mh-diamond li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 0;
  font-size: .62em;
  line-height: 2.4;
  color: #BF9B30;
}

/* ---------------------------------------------------------
   10. Details typographiques
   --------------------------------------------------------- */
.mh-old-price s,
.mh-old-price del {
  opacity: .5;
  text-decoration-thickness: 1px;
}

.mh-arabic {
  direction: rtl;
  font-family: "Amiri", serif;
}

/* Le texte arabe du hadith garde une naskh traditionnelle (Amiri) :
   c'est la forme lisible et d'usage pour un texte religieux.
   Toute l'interface latine, elle, est en sans geometrique. */

/* ---------------------------------------------------------
   11. Liens : heriter de la couleur du bloc, pas du bleu du theme
   --------------------------------------------------------- */
.mh-link a,
.mh-link .elementor-heading-title a,
.mh-links a {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}
.mh-link a:hover {
  color: #BF9B30;
}
.mh-links p {
  margin: 0 0 .5rem;
}
.mh-links a:hover {
  color: #E2C979;
}

/* Navigation : soulignement dore qui se deploie */
.mh-navlink a {
  position: relative;
}
.mh-navlink a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: #BF9B30;
  transition: width .4s var(--mh-ease);
}
.mh-navlink a:hover::after {
  width: 100%;
}

/* ---------------------------------------------------------
   12. Accordeon FAQ : le theme colore les liens, on reprend la main
   --------------------------------------------------------- */
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-accordion-title {
  color: #1B3324;
  text-decoration: none;
  transition: color .3s ease;
}
.elementor-accordion .elementor-tab-title.elementor-active a,
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title,
.elementor-accordion .elementor-tab-title:hover a {
  color: #BF9B30;
}

/* ---------------------------------------------------------
   13. Masquage responsive
   mhhdr030 = bloc du bouton d'en-tete : masque sous 768px, car le bouton
   principal du heros se trouve juste en dessous et porte le meme libelle.
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .mh-hide-mobile,
  .elementor-element-mhhdr030 {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   14. Respect de prefers-reduced-motion.
   Tout le mouvement continu s'arrete, les etats de survol
   restent en changement de couleur seul.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mh-em em,
  .mh-em i,
  .e-con[data-id="mhhero01"]::before,
  .e-con[data-id="mhpar001"]::before,
  .e-con[data-id="mhhad001"]::before,
  .e-con[data-id="mhcta001"]::before,
  .e-con[data-id="mhmet020"]::before,
  .e-con[data-id="mhmet040"]::before,
  .e-con[data-id="mhprg010"]::before,
  .e-con[data-id="mhpar001"]::after,
  .e-con[data-id="mhhad001"]::after,
  .e-con[data-id="mhcta001"]::after {
    animation: none !important;
  }

  .mh-em em,
  .mh-em i {
    background: none;
    -webkit-text-fill-color: #BF9B30;
    color: #BF9B30;
    font-style: italic;
  }

  .e-con[data-id="mhmet011"],
  .e-con[data-id="mhmet034"],
  .e-con[data-id^="mhprg1"],
  .e-con[data-id^="mhblo1"],
  .e-con[data-id^="mhblo2"],
  .elementor-element[data-id^="mhsav1"],
  .elementor-button {
    transition-duration: .01ms !important;
  }

  .e-con[data-id="mhmet011"]:hover,
  .e-con[data-id="mhmet034"]:hover,
  .e-con[data-id^="mhprg1"]:hover,
  .e-con[data-id^="mhblo1"]:hover,
  .e-con[data-id^="mhblo1"]:hover .e-con[data-id^="mhblo2"],
  .elementor-element[data-id^="mhsav1"]:hover,
  .elementor-button:hover {
    transform: none !important;
  }

  /* Filet de securite : le contenu reste visible si les animations
     d'entree ne se jouent pas. */
  .elementor-invisible {
    opacity: 1 !important;
    animation: none !important;
  }
}