/*
Theme Name: Divi Child
Description: Thème enfant de Divi
Author: Mohamed ADDA
Author URI: https://creaam.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* Force le chargement de la police ETmodules depuis le bon dossier (Divi récent) */

/* Fallback local — depuis Divi-child vers Divi */

@font-face{
  font-family: "ETmodules";
  src: url("../Divi/core/admin/fonts/modules/all/modules.woff2") format("woff2"),
       url("../Divi/core/admin/fonts/modules/all/modules.woff")  format("woff"),
       url("../Divi/core/admin/fonts/modules/all/modules.eot")  format("eot"),
       url("../Divi/core/admin/fonts/modules/all/modules.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root{
  --mmt-visible: 0px;   /* hauteur visible de la top-bar (MAJ JS) */
  --admin-off: 0px;     /* 32px si admin bar (MAJ JS) */
}

/* Top bar - sticky ; le style visuel (couleurs/padding) reste dans Divi */
.mmt-topbar{
  position: sticky;
  top: var(--admin-off);
  z-index: 1;
  transform: translateY(0);
  will-change: transform;
  transition: transform 140ms linear;  douceur 
}

.mmt-topbar .et_pb_section{ margin:0 !important; }

/* Header/Menu - sticky :

   Divi met .et_pb_sticky (+ parfois .et_pb_sticky--top) sur l'élément sticky */

/* Header/Menu – sticky + transition sur le TOP */

.mmt-mainheader.et_pb_sticky,
.mmt-mainheader.et_pb_sticky--top,
.mmt-mainheader.et_pb_section.et_pb_sticky,
.mmt-mainheader.et_pb_row.et_pb_sticky{
  position: sticky;
  top: calc(var(--admin-off) + var(--mmt-visible)) !important;
  z-index: 9998;
  transition: top 140ms ease-out;   /*<- lissage du mouvement*/ 
}


/* ============================================
   FIX ICÔNE RECHERCHE - FORCÉ AVEC !IMPORTANT
   ============================================
   
   PROBLÈME : L'icône disparaît sur certaines pages
   (catégories avec sous-catégories)
   
   CAUSE : Conflit non identifié entre le CSS du fil d'Ariane,
   des grilles et du bouton recherche Divi
   
   SOLUTION TEMPORAIRE : Forcer l'affichage avec !important
   
   TODO : Identifier la cause exacte du conflit quand temps disponible
   ============================================ */

/***********************Champ recherch********************/
/* 1) Le wrap global du menu : on centre verticalement et on gère l’espace */
.et_pb_menu .et_pb_menu__wrap{
  display:flex;
  align-items:center !important;
  gap:16px; /* espace entre <ul> et la loupe/CTA */

}

/* 2) La liste UL du menu + chaque LI en flex centré */
.et_pb_menu .et_pb_menu__menu > nav > ul{
  display:flex;
  align-items:center;
}

.et_pb_menu .et_menu_nav > li{
  display:flex;
  align-items:center;
}

/* 3) Tous les liens du menu : pas de padding vertical, centré sur une même hauteur */

.et_pb_menu .et_menu_nav > li > a {
  display:flex;
  align-items:center;
  line-height:1;
  padding-top:0;
  padding-bottom:0;
  height:38px; /* hauteur de référence */
}

/* 4) CTA : même hauteur que le menu, pilule + padding horizontal */
.et_pb_menu .et_menu_nav > li.faire_un_don > a{
  height:38px;
  padding:0 22px;
  border-radius:9999px;
  background:#E64C5B;
  color:#fff;
  font-weight:700;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.et_pb_menu .et_menu_nav > li.faire_un_don > a:hover{
  background:#cf3a4a;
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(230,76,91,.18);
}

/* 5) Bouton recherche (avec la classe ajoutée en JS) : rond, même hauteur */
.et_pb_menu .mmt-search-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  height:38px;
  width:38px;
  border-radius:50%;
  background:#C8CACE !important;
  color:#fff !important;
  line-height:1;
  padding:0;
  margin:0;            /* supprime les anciens margin-top/left */
  transition: background .2s ease, transform .15s ease;
}

.et_pb_menu .mmt-search-btn:hover{
  background:#E64C5B;
  transform:translateY(0px);
}

/* === Champ recherche style pilule === */

.et_pb_menu__search-container:not(.et_pb_menu__search-container--disabled) .et_pb_menu__search-input {
  width: 500px !important;                 /* largeur desktop */
  max-width: 90% !important;               /* sécurité responsive */
  height: 40px;                 /* hauteur standard */
  border: 1px solid #ccc !important;       /* contour gris léger */
  border-radius: 9999px;        /* pilule */
  padding: 0 16px;              /* espace texte à gauche/droite */
  margin: 0 auto;               /* centrage */
  display: block;
  font-size: 15px;
  color: #333;                  /* texte saisi */
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); /* léger relief */
}

/* Placeholder (texte “Rechercher …”) */
.et_pb_menu__search-container:not(.et_pb_menu__search-container--disabled) 
.et_pb_menu__search-input::placeholder {
  color: #aaa;                 /* gris clair */
  font-style: italic;           /* optionnel */
}

/* Responsive : champ prend 100% en mobile */

@media (max-width: 980px){
  .et_pb_menu__search-container:not(.et_pb_menu__search-container--disabled) 
    .et_pb_menu__search-input {
    width: 100% !important;
    max-width: none;
  }
}

/***********************Champ recherch********************/


/***********************Footer*****************************/

/* Force le fond du footer sur l'élément principal */

#mmt-footer,
.et-l--footer,
footer.site-footer {
  position: relative;
  background-color: #333 !important; /* ta couleur de fond foncé */
  z-index: 0;              /* pour s'assurer qu'il est bien derrière */
  isolation: isolate;      /* évite les conflits de stacking en Firefox/Edge */
}

/* Neutraliser le pseudo-élément généré par Divi si besoin */
#mmt-footer::before,
.et-l--footer::before,
footer.site-footer::before {
  display: none !important;
}

.mmt-footer h2 {
color: #fff;
}

/* ====== MMT – Bloc Horaires de prières (sans carte/fond) ====== */

.mmt-prayer{
  --accent: #B01D58;       /* magenta vin */
  --accent-2: #B01D58;     /* variante plus claire (date hijri) */
  --text: #ffffff;
  --ink: #222;             /* texte sur fond clair (dates) */
  --border-lite: rgba(255,255,255,.6);
  font-family: inherit;
  color: var(--text);
}

/* Bandeau des dates (fond blanc) */

.mmt-prayer__dates{
  background:#fff;
  color: var(--ink);
  border-radius: 6px 6px 0 0;
  padding: 10px 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  font-size: 14px;
  border:1px solid #eee;
  border-bottom: none;
}

.mmt-prayer__date--hijri{ color: var(--accent-2); font-weight:700; }

/* Bloc principal coloré */

.mmt-prayer__accent{
  background: var(--accent);
  border:1px solid rgba(255,255,255,.15);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 18px 18px 16px;
  color: var(--text);
}

/* Titre secondaire + heure mise en avant */

.mmt-prayer__next{ margin: 0 0 8px 0; font-weight: 700; font-size: 16px; }
.mmt-prayer__time{ font-size: clamp(34px, 5vw, 54px); line-height:1; font-weight: 800; margin: 4px 0 14px; }

/* Grille des horaires */

.mmt-prayer__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border:2px dotted var(--border-lite);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 14px;
}

.mmt-prayer__cell{
  text-align:center;
  padding: 8px 6px;
  font-size: 12px;
  line-height: 1.25;
  border-right: 1px dashed rgba(255,255,255,.3);
}

.mmt-prayer__cell:last-child{ border-right:none; }
.mmt-prayer__cell b{ display:block; font-weight:700; }

/* Bouton “Horaires du mois” */

.mmt-prayer__btn{
  display:inline-block;
  background:#fff;
  color: var(--accent);
  padding: 10px 18px;
  border-radius: 24px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}

a.calendrier-annee {
 color: #fff;
 text-decoration: none;
 font-weight: 700;
}

/* Responsif */

@media (max-width: 980px){
  .mmt-prayer__grid{ grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
  .mmt-prayer__cell{ border-right: none; border-bottom: 1px dashed rgba(255,255,255,.3); }
  .mmt-prayer__cell:nth-child(3n){ border-bottom:none; }
  a.calendrier-annee {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -99999px;
    background-image: url("https://dev.mosquee-mirail-toulouse.fr/wp-content/themes/Divi-child/images/prayer-icons/Calendar-days.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
}

@media (max-width: 480px){
  .mmt-prayer__grid{ grid-template-columns: repeat(2, 1fr); }
}



/***********************Footer*****************************/



/*Video home

.mmt-video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:0px}

.mmt-video-embed iframe{position:absolute;inset:0;width:100%;height:100%}

.mmt-video-title{margin:10px 0 0;font-size:18px;line-height:1.3}*/

.mmt-video-card {background:#fff; border-radius:0;}


/* Vidéo */

.mmt-video-embed {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.mmt-video-embed iframe {position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0;}

/* Ligne meta */

.mmt-video-meta {padding:10px 16px; font-size:12px; font-weight:600;margin-top: 10px;}
.mmt-pill {background:#fff; color:#CCC6C2!important; padding:7px 0px; border-radius:0px; font-size:12px; text-transform:uppercase;}
.mmt-sep {margin:0 6px; opacity:.6;}
.mmt-cat {text-transform:uppercase; font-size:11px; color:#b21d58;}

/**
 * ============================================
 * TITRE VIDEO
 * ============================================
 */

.mmt-video-title {
  margin:0px 16px 0px; 
  font-size:23px !important; 
  color:#666; 
  line-height : 1.4em;
  /*font-family: 'Avenir Pro Demi', Helvetica, Arial, Lucida, sans-serif;*/
}

.mmt_tt_emissions {
    font-size: 6vh;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #E64C5B; /* Rouge/rose pour le texte principal */
    font-family: 'AvenirNextLTPro-Bold',Helvetica,Arial,Lucida,sans-serif;
}

.mmt_tt_emissions span {
    color: #B01D58; /* Bordeaux/violet pour "en vidéos" */
    font-family: 'AvenirNextLTPro-Regular',Helvetica,Arial,Lucida,sans-serif;
}

/* Ajustements responsive */
@media screen and (max-width: 768px) {
    .mmt_tt_emissions {
        font-size: 5vh;
    }
}

@media screen and (max-width: 480px) {
    .mmt_tt_emissions {
        font-size: 4.5vh;
    }
}


/**
 * ============================================
 * FIN - TITRE VIDEO
 * ============================================
 */


/* Carte vidéo pour la home */
.mmt-video-card-home {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
    max-width: 600px;
}

/* Player vidéo YouTube responsive - CORRIGÉ */
.mmt-video-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0; /* AJOUTÉ pour forcer le ratio */
    overflow: hidden;
    background: #000;
}

.mmt-video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* AJOUTÉ pour éliminer l'espace en dessous */
}

/* Contenu de la carte */
.mmt-video-content {
    padding: 24px 24px 0 24px;
    background: #fff; /* Assuré que le fond est blanc */
}

/* Badge VIDÉO - RUBRIQUE */
.mmt-video-badge {
    display: inline-block;
    /*background: #E84C5B;*/
    color: #CCC6C2;
    padding: 0;
    /*border-radius: 4px;*/
    font-size: 11px;
    /*font-weight: 700;*/
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Titre */
.mmt-video-title {
    font-size: 22px;
    /*font-weight: 600;*/
    color: #666666;
    margin: 0;
    line-height: 1.3;
}

/* Lien du titre */
.mmt-video-title-link {
    color: #2c2c2c;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mmt-video-title-link:hover {
    color: #E84C5B;
}

/* Extrait de description */
.mmt-video-excerpt {
    /*font-size: 14px;
    line-height: 1.6;*/
    color: #666;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .mmt-video-content {
        padding: 20px;
    }
    
    .mmt-video-title {
        font-size: 20px;
    }
    
    .mmt-video-excerpt {
        font-size: 13px;
    }

    /* Forcer ratio 16:9 strict pour TOUTES les vidéos YouTube sur mobile */
.mmt-video-player,
.mmt-video-player > *,
div[class*="video"] iframe[src*="youtube"],
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    aspect-ratio: 16 / 9 !important;
}

.mmt-video-player {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.mmt-video-player iframe,
.mmt-video-player > iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Forcer pour les embeds WordPress */
.et_pb_video_box,
.et_pb_video {
    aspect-ratio: 16 / 9 !important;
    padding-bottom: 0 !important;
}

.et_pb_video_box iframe,
.et_pb_video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
}

/**
 * ============================================
 * SYSTÈME VIDÉO - MOSQUÉE MIRAIL TOULOUSE
 * ============================================
 */

/**
 * NAVIGATION VIDÉO (Flèches Précédent/Suivant)
 */

.mmt-video-navigation {
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.mmt-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 2px solid #B01D58;
    border-radius: 50%;
    color: #B01D58;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mmt-nav-btn:hover {
    background: #B01D58;
    color: #fff;
}

.mmt-nav-btn svg {
    width: 24px;
    height: 24px;
}

.mmt-nav-disabled {
    border-color: #E0E0E0;
    color: #E0E0E0;
    cursor: not-allowed;
    opacity: 0.5;
}

.mmt-nav-disabled:hover {
    background: #fff;
    color: #E0E0E0;
}

/**
 * ============================================
 * SIDEBAR GALERIE VIDÉO
 * ============================================
 */

.mmt-video-sidebar {
    background: transparent;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mmt-sidebar-header {
    background: #B01D58;
    padding: 20px 24px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.mmt-sidebar-category {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0.95;
    margin-bottom: 8px;
    text-transform: none;
}

.mmt-sidebar-title {
    font-size: 22px;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: #ffffff !important;
}

.mmt-episodes-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #fff;
    width: 100%;
}

/* Limiter la hauteur de la sidebar à 5 épisodes visibles */
.mmt-episodes-list {
    max-height: 555px; /* Desktop : ~111px par épisode × 5 */
    overflow-y: auto;
}

@media (max-width: 767px) {
    .mmt-episodes-list {
        max-height: 400px; /* Mobile : ~80px par épisode × 5 */
    }
}

.mmt-episodes-list::-webkit-scrollbar {
    width: 8px;
}

.mmt-episodes-list::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.mmt-episodes-list::-webkit-scrollbar-thumb {
    background: #D9D9D9;
    border-radius: 4px;
}

.mmt-episodes-list::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Item épisode - Desktop */
.mmt-episode-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.mmt-episode-item:hover {
    background: #fafafa;
}

.mmt-episode-active {
    background: #FFE3E6;
    /*border-left: 4px solid #B01D58;*/
    padding-left: 16px;
}

.mmt-episode-active .mmt-episode-title {
    color: #B01D58;
    font-weight: 700;
}

/* Vignette */
.mmt-episode-thumb {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 79px;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.mmt-episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mmt-episode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mmt-episode-item:hover .mmt-episode-overlay {
    opacity: 1;
}

/* Info épisode */
.mmt-episode-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.mmt-episode-title {
    font-size: 16px !important;
    font-weight: normal;
    line-height: 1.4;
    margin: 0;
    color: #666666 !important;
    word-wrap: break-word;
}

.mmt-episode-number {
    font-size: 12px;
    font-weight: normal;
    color: #A19E9D;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmt-episode-date {
    font-size: 13px;
    color: #999;
}

/**
 * ============================================
 * RESPONSIVE
 * ============================================
 */

/* TABLETTE (768px - 1024px) : Vignette au-dessus, texte en dessous */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Désactiver le sticky sur tablette */
    .mmt-video-sidebar {
        position: relative;
        top: auto;
        max-height: none;
    }
    
    .mmt-episodes-list {
        max-height: 600px;
    }
    
    /* Passer en colonne (vignette au-dessus) */
    .mmt-episode-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    /* Vignette plus grande en mode colonne */
    .mmt-episode-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    .mmt-episode-info {
        min-width: 100%;
    }
    
    .mmt-episode-title {
        font-size: 15px;
    }
    
    .mmt-sidebar-title {
        font-size: 24px;
    }
}

/* MOBILE (<768px) : Vignette à gauche (compact) */
@media (max-width: 767px) {
    /* Désactiver le sticky sur mobile */
    .mmt-video-sidebar {
        position: relative;
        top: auto;
        max-height: none;
    }
    
    .mmt-episodes-list {
        max-height: 400px;
    }
    
    /* Garder la disposition en ligne mais plus compact */
    .mmt-episode-item {
        flex-direction: row;
        gap: 12px;
        padding: 12px 16px;
    }
    
    /* Vignette plus petite sur mobile */
    .mmt-episode-thumb {
        width: 100px;
        height: 56px;
    }
    
    .mmt-episode-title {
        font-size: 14px;
        line-height: 1.3;
    }
    
    .mmt-episode-number {
        font-size: 11px;
    }
    
    .mmt-episode-date {
        font-size: 12px;
    }
    
    .mmt-sidebar-header {
        padding: 16px 20px;
    }
    
    .mmt-sidebar-category {
        font-size: 12px;
    }
    
    .mmt-sidebar-title {
        font-size: 20px;
    }
    
    /* Réduire le padding pour l'épisode actif */
    .mmt-episode-active {
        padding-left: 12px;
    }
}

/* TRÈS PETIT MOBILE (<480px) */
@media (max-width: 480px) {
    .mmt-episode-thumb {
        width: 80px;
        height: 45px;
    }
    
    .mmt-episode-title {
        font-size: 13px;
    }
    
    .mmt-episode-item {
        gap: 10px;
        padding: 10px 12px;
    }
}

/**
 * CARTE VIDÉO HOME
 */

.mmt-video-card-home {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
}

.mmt-video-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.mmt-video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.mmt-video-content {
    padding: 24px 24px 0 24px;
    background: #fff;
}

.mmt-video-badge {
    display: inline-block;
    /*background: #C9184A;*/
    color: #CCC6C2;
    /*padding: 6px 14px;
    border-radius: 4px;*/
    font-size: 12px;
    /*font-weight: 700;*/
    letter-spacing: 0.5px;
    /*margin-bottom: 16px;*/
}

.mmt-video-title {
    font-size: 22px;
    /*font-weight: 600;
    margin: 0 0 12px 0;*/
    line-height: 1.3;
}

.mmt-video-title-link {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mmt-video-title-link:hover {
    color: #C9184A;
}

.mmt-video-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/**
 * RESPONSIVE
 */

@media (max-width: 1024px) {
    .mmt-video-sidebar {
        position: relative;
        top: auto;
        max-height: none;
    }
    
    .mmt-episodes-list {
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .mmt-video-navigation {
        gap: 12px;
    }
    
    .mmt-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .mmt-nav-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .mmt-episode-thumb {
        width: 100px;
        height: 56px;
    }
    
    .mmt-episode-title {
        font-size: 14px;
    }
    
    .mmt-sidebar-title {
        font-size: 22px;
    }
    
    .mmt-episode-item {
        padding: 12px 16px;
    }
    
    .mmt-video-content {
        padding: 20px;
    }
    
    .mmt-video-title {
        font-size: 20px;
    }
    
    .mmt-video-excerpt {
        font-size: 13px;
    }
}

/* Titre + Flèches sur la même ligne */
.mmt-title-with-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mmt-title-with-nav .entry-title {
    margin: 0;
    flex: 0 0 auto;
}

.mmt-title-with-nav .mmt-video-navigation {
    margin-left: 0;
}

/* Responsive : flèches en dessous sur mobile */
@media (max-width: 768px) {
    .mmt-title-with-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Fil d'Ariane Global */
.mmt-breadcrumb-wrapper {
    margin: 20px 0;
    font-size: 14px;
}

.mmt-breadcrumb-wrapper #breadcrumbs {
    color: #666;
}

.mmt-breadcrumb-wrapper a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mmt-breadcrumb-wrapper a:hover {
    color: #B01D58;
    text-decoration: underline;
}

.mmt-breadcrumb-wrapper .breadcrumb_last {
    color: #2c2c2c;
    font-weight: 600;
}

@media (max-width: 768px) {
    .mmt-breadcrumb-wrapper {
        font-size: 13px;
        margin: 15px 0;
    }
}

/* ============================================
   GRILLE DES ÉMISSIONS
   ============================================ */

.mmt-emissions-grid {
    display: grid;
    gap: 30px;
    margin: 40px 0;
}

.mmt-emissions-grid.mmt-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mmt-emissions-grid.mmt-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mmt-emissions-grid.mmt-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mmt-emission-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.mmt-emission-card:hover {
    transform: translateY(-5px);
    /*box-shadow: 0 8px 20px rgba(0,0,0,0.15);*/
    box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.1);
}

.mmt-emission-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mmt-emission-thumbnail {
    position: relative;
    padding-top: 56.25%; /* Ratio 16:9 */
    overflow: hidden;
    background: #f0f0f0;
}

.mmt-emission-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.mmt-emission-card:hover .mmt-emission-thumbnail img {
    transform: scale(1.05);
}

/*.mmt-emission-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(176, 29, 88, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.mmt-emission-card:hover .mmt-emission-overlay {
    opacity: 1;
}*/

.mmt-overlay-text {
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mmt-emission-content {
    padding: 25px;
}

.mmt-emission-title {
    font-size: 20px;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.mmt-emission-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mmt-emission-meta {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.mmt-series-count {
    display: inline-block;
    font-size: 13px;
    color: #B01D58;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .mmt-emissions-grid.mmt-columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mmt-emissions-grid.mmt-columns-4,
    .mmt-emissions-grid.mmt-columns-3,
    .mmt-emissions-grid.mmt-columns-2 {
        grid-template-columns: 1fr;
    }
    
    .mmt-emissions-grid {
        gap: 20px;
    }
    /* Désactiver animations au survol sur mobile */
    .mmt-emission-card:hover {
        transform: none;
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.1);
    }
    
    .mmt-emission-card:hover .mmt-emission-thumbnail img {
        transform: none;
    }
    
    .mmt-emission-overlay {
        display: none;
    }
}

/*@media (max-width: 480px) {
    .mmt-emissions-grid {
        grid-template-columns: 1fr;
    }
}*/

/* ============================================
   GRILLE DES SÉRIES
   ============================================ */

.mmt-series-grid {
    display: grid;
    gap: 30px;
    margin: 40px 0;
}

.mmt-series-grid.mmt-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mmt-series-grid.mmt-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mmt-series-grid.mmt-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mmt-serie-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.mmt-serie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.mmt-serie-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mmt-serie-thumbnail {
    position: relative;
    padding-top: 56.25%; /* Ratio 16:9 */
    overflow: hidden;
    background: #f0f0f0;
}

.mmt-serie-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.mmt-serie-card:hover .mmt-serie-thumbnail img {
    transform: scale(1.05);
}

.mmt-serie-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(176, 29, 88, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.mmt-serie-card:hover .mmt-serie-overlay {
    opacity: 1;
}

.mmt-serie-content {
    padding: 25px;
}

.mmt-serie-title {
    font-size: 20px !important; /*FIX TAILLE H3 GRILLES VIDÉO - FORCE*/
    margin: 0 0 7px 0;
    line-height: 1.3;
}

.mmt-serie-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mmt-serie-meta {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.mmt-episodes-count {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #B01D58;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .mmt-series-grid.mmt-columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mmt-series-grid.mmt-columns-4,
    .mmt-series-grid.mmt-columns-3,
    .mmt-series-grid.mmt-columns-2 {
        grid-template-columns: 1fr;
    }
    
    .mmt-series-grid {
        gap: 20px;
    }
    /* Désactiver animations au survol sur mobile */
    .mmt-serie-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .mmt-serie-card:hover .mmt-serie-thumbnail img {
        transform: none;
    }
    
    .mmt-serie-overlay {
        display: none;
    }
}

/*@media (max-width: 480px) {
    .mmt-series-grid {
        grid-template-columns: 1fr;
    }
}*/

/* ============================================
   FIL D'ARIANE PERSONNALISÉ
   ============================================ */

.mmt-breadcrumb {
    font-size: 14px;
    padding: 15px 0;
    margin-bottom: 20px;
}

/* Le span parent qui contient tout */
.mmt-breadcrumb > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* Sur mobile : scrollable horizontal sans retour à la ligne */
@media (max-width: 768px) {
    .mmt-breadcrumb {
        font-size: 13px;
        padding: 10px 0;
        margin: 0;
        overflow: hidden; /* Important : contenir le débordement */
    }
    
    .mmt-breadcrumb > span {
        display: flex;
        align-items: center;
        flex-wrap: nowrap; /* Pas de retour à la ligne */
        gap: 0;
        overflow-x: auto; /* Scroll horizontal */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        padding-bottom: 10px; /* Espace pour éviter de couper le bas */
        margin-bottom: -10px; /* Compenser le padding */
    }
    
    /* Masquer la scrollbar */
    .mmt-breadcrumb > span::-webkit-scrollbar {
        display: none;
    }
    
    /* Empêcher les éléments de se compresser */
    .mmt-breadcrumb > span > span {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Réduire la taille des icônes */
    .mmt-breadcrumb > span > span:first-child a::before {
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }
    
    .mmt-breadcrumb > span > span:not(:last-child)::after {
        width: 14px;
        height: 14px;
        margin: 0 8px;
    }
}

/* Tous les spans enfants (chaque élément du fil) */
.mmt-breadcrumb > span > span {
    display: inline-flex;
    align-items: center;
}

/* Tous les liens */
.mmt-breadcrumb a {
    color: #A19E9D !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hover sur les liens */
.mmt-breadcrumb a:hover {
    color: #E64C5B !important;
}

/* Élément actif (dernier élément) */
.mmt-breadcrumb .breadcrumb_last {
    color: #B01D58 !important;
    font-weight: 600 !important;
}

/* Supprimer le gras du strong dans breadcrumb_last */
.mmt-breadcrumb .breadcrumb_last strong {
    font-weight: 600 !important;
    color: #B01D58 !important;
}

/* ============================================
   ICÔNE MAISON UNIQUEMENT POUR "ACCUEIL"
   ============================================ */

/* Premier span enfant = Accueil */
.mmt-breadcrumb > span > span:first-child a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A19E9D'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
    vertical-align: middle;
}

/* Changer la couleur de l'icône maison au survol */
.mmt-breadcrumb > span > span:first-child a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E64C5B'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

/* ============================================
   CHEVRON (FLÈCHE) ENTRE LES ÉLÉMENTS
   ============================================ */

/* Ajouter un chevron APRÈS chaque span enfant (sauf le dernier) */
.mmt-breadcrumb > span > span:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A19E9D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .mmt-breadcrumb {
        font-size: 13px;
        padding: 10px 0;
    }
    
    /* Réduire la taille des icônes sur mobile */
    .mmt-breadcrumb > span > span:first-child a::before,
    .mmt-breadcrumb > span > span::after {
        width: 14px;
        height: 14px;
    }
    
    .mmt-breadcrumb > span > span::after {
        margin: 0 8px;
    }
    
    .mmt-breadcrumb > span > span:first-child a::before {
        margin-right: 5px;
    }
}

/* ============================================
   BLOG - ACTUS 
   ============================================ */

.derniers-articles-sidebar {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.sidebar-title {
    font-size: 20px;
    margin: 0 0 20px 0;
    color: #666666;
    font-style: italic;
}

.recent-post-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.recent-post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.recent-post-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.recent-post-link:hover {
    opacity: 0.7;
}

.recent-post-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 4px;
}

.recent-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.no-image {
    width: 100%;
    height: 100%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recent-post-content {
    flex: 1;
    min-width: 0;
}

.recent-post-title {
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 8px 0;
    color: #666666;
}

.recent-post-date {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* ============================================
   Social share 
   ============================================ */

.share-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    background: #f5f5f5;
    padding: 10px 18px;
    border-radius: 4px;
    margin-right: 10px;
    position: relative; /* IMPORTANT pour positionner la flèche */
}

/* Icône de partage avant le texte */
.share-label::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23999'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Flèche qui sort du rectangle à droite */
.share-label::after {
    content: "";
    position: absolute;
    right: -8px; /* Position à droite du rectangle */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #f5f5f5; /* Même couleur que le fond */
}

.social-share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

/*.share-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    margin-right: 5px;
}*/

.social-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-share-btn svg {
    width: 20px;
    height: 20px;
    fill: #E64C5B;
}

.social-share-btn:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}

.social-share-btn.facebook {
    background: #F5F5F5;
}

.social-share-btn.twitter {
    background: #F5F5F5;
}

.social-share-btn.whatsapp {
    background: #F5F5F5;
}

.social-share-btn.linkedin {
    background: #F5F5F5;
}

.social-share-btn.pinterest {
    background: #F5F5F5;
}


/* ============================================
   Sidebar articles sticky 
   ============================================ */

.sidebar-sticky {
    position: sticky;
    top: 170px;
    align-self: flex-start;
    max-height: calc(100vh - 60px); /* Hauteur max = hauteur viewport - marges */
    overflow-y: auto; /* Scroll si contenu trop long */
}

/* Scroll propre si nécessaire */
.sidebar-sticky::-webkit-scrollbar {
    width: 6px;
}

.sidebar-sticky::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sidebar-sticky::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}



/* ==========================================
   ACTUALITÉS - Mosquée Mirail Toulouse
   ========================================== */

/* === Container principal === */
.mmt-page-actualites {
    /*max-width: 1200px;
    padding: 40px 20px;*/
    margin: 0 auto;
}

/* === Titre de section === */
.mmt-section-titre {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 40px;
    color: #B01D58;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmt-section-titre svg {
    width: 40px;
    height: 40px;
    stroke: #E84C5B;
}

/* ==========================================
   ARTICLE À LA UNE
   ========================================== */
.mmt-a-la-une {
    margin-bottom: 60px;
}

.mmt-article-une {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-height: 450px;
}

/* Image À la une */
.mmt-article-une-image {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.mmt-article-une-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mmt-article-une:hover .mmt-article-une-image img {
    transform: scale(1.05);
}

.mmt-article-une-date-overlay {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.98);
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 14px;
    color: #666;
    box-shadow: 0 0px 4px rgba(0,0,0,0.1);
    text-transform: uppercase;
}

/* Contenu À la une */
.mmt-article-une-content {
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.mmt-article-une-titre {
    font-size: 4vh;
    line-height: 1.2;
    margin: 20px 0 25px 0;
    color: #666;
    font-weight: 700;
}

.mmt-article-une-extrait {
    font-size: 24px;
    /*font-family: 'AvenirNextLTPro-Italic',Helvetica,Arial,Lucida,sans-serif;*/
    line-height: 1.7;
    color: #555;
    margin-bottom: 35px;
}

/* ===================================================
   LIMITER EXTRAITS À 2-3 LIGNES - PAGE ACTUALITÉS
   =================================================== */

/* Article "À la une" - 3 lignes max */
.mmt-article-une-extrait {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 4.5em !important;
    line-height: 1.5em !important;
}

/* Cartes de la grille - 2 lignes max */
.mmt-article-card-extrait {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 3em !important;
    line-height: 1.5em !important;
}


/* ==========================================
   BADGES CATÉGORIE
   ========================================== */
.mmt-category-badge {
    display: inline-block;
    padding: 2px 14px;
    background: #ACC830;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    border-radius: 0px;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

/* ==========================================
   BOUTONS
   ========================================== */
.mmt-btn-lire-suite {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #B01D58;
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;
    font-size: 15px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.mmt-btn-lire-suite svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.mmt-btn-lire-suite:hover {
    background: #E84C5B;
    transform: translateY(-2px);
}

.mmt-btn-lire-suite:hover svg {
    transform: translateX(5px);
}

/* ==========================================
   GRILLE D'ARTICLES
   ========================================== */
.mmt-grille-articles {
    margin-top: 60px;
}

.mmt-articles-grid {
    display: grid;
    gap: 3%;
    row-gap: 40px;
    margin-bottom: 40px;
}

.mmt-articles-grid[data-colonnes="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.mmt-articles-grid[data-colonnes="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.mmt-articles-grid[data-colonnes="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================
   CARTES ARTICLES
   ========================================== */

/* Largeur automatique adaptée au contenu */
.cat-width-auto {
    width: fit-content !important;
    max-width: 100%; /* Pour éviter le débordement sur mobile */
}

.mmt-article-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mmt-article-card:hover {
    transform: translateY(-8px);
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
}

.mmt-article-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Image carte */
.mmt-article-card-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.mmt-article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mmt-article-card:hover .mmt-article-card-image img {
    transform: scale(1.1);
}

.mmt-placeholder-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmt-article-date-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    text-transform: uppercase;
}

/* Contenu carte */
.mmt-article-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mmt-article-card-titre {
    font-size: 24px;
    line-height: 1.4;
    margin: 12px 0 15px 0;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /*overflow: hidden;*/
}

.mmt-article-card-extrait {
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mmt-btn-lire-suite-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #B01D58;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: auto;
}

.mmt-btn-lire-suite-card svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.mmt-article-card:hover .mmt-btn-lire-suite-card {
    background: #a83752;
    transform: translateX(3px);
}

.mmt-article-card:hover .mmt-btn-lire-suite-card svg {
    transform: translateX(3px);
}

/* ==========================================
   BOUTON "CHARGER PLUS"
   ========================================== */
.mmt-load-more-container {
    text-align: center;
    margin: 40px 0;
}

.mmt-btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: #fff;
    color: #c94965;
    border: 2px solid #c94965;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.mmt-btn-load-more:hover:not(:disabled) {
    background: #c94965;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 73, 101, 0.3);
}

.mmt-btn-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mmt-load-spinner svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Tablette */
@media (max-width: 980px) {
    .mmt-article-une {
        grid-template-columns: 1fr;
    }
    
    .mmt-article-une-image {
        height: 350px;
    }
    
    .mmt-article-une-content {
        padding: 30px;
    }
    
    .mmt-article-une-titre {
        font-size: 26px;
    }
    
    .mmt-articles-grid[data-colonnes="3"],
    .mmt-articles-grid[data-colonnes="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mmt-page-actualites {
        padding: 20px 0px;
    }
    
    .mmt-section-titre {
        font-size: 20px;
        display: none;
    }
    
    .mmt-article-une-image {
        height: 250px;
    }
    
    .mmt-article-une-content {
        padding: 20px;
    }
    
    .mmt-article-une-titre {
        font-size: 22px;
    }
    
    .mmt-article-une-extrait {
        font-size: 14px;
    }
    
    .mmt-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .mmt-article-card-image {
        height: 200px;
    }
    
    .mmt-btn-load-more {
        padding: 14px 30px;
        font-size: 14px;
    }
}

/* ==========================================
   MESSAGE "AUCUN ARTICLE"
   ========================================== */
.mmt-no-articles {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 16px;
}


/* ==========================================
   SIDEBAR - CATÉGORIES
   ========================================== */
.mmt-categories-sidebar {
    background: #f9f9f9;
    padding: 20px;
}

.mmt-categories-sidebar .sidebar-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #333;
    font-style: italic;
}

.category-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.category-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 5px 0;
}

.category-title {
    font-size: 16px;
    margin: 0 !important;
    color: #666;
    transition: color 0.3s ease;
}

.category-count {
    font-size: 14px;
    color: #888;
    margin-left: auto;
    padding-left: 15px;
    transition: color 0.3s ease;
}

/* HOVER */
.category-link:hover .category-title {
    color: #B01D58;
}

.category-link:hover .category-count {
    color: #B01D58;
}


/* ==========================================
   PAGE ACCUEIL - BLOCS À LA UNE
   ========================================== */

.mmt-highlight-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image avec date overlay */
.mmt-highlight-image {
    position: relative;
    overflow: hidden;
    height: 254px;
    background: #f5f5f5;
}

.mmt-highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mmt-highlight-card:hover .mmt-highlight-image img {
    transform: scale(1.05);
}

.mmt-placeholder-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

/* Date sur l'image (en haut à droite) */
.mmt-highlight-date {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Contenu du bloc */
.mmt-highlight-content {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Badge catégorie (texte seul, pas de background) */
.mmt-highlight-badge {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Couleurs spécifiques par type */
.mmt-badge-islam {
    color: #B01D58;
    font-family: 'AvenirNextLTPro-Demi';
}

.mmt-badge-actu {
    color: #B01D58;
    font-family: 'AvenirNextLTPro-Demi';
}

.mmt-badge-video {
    color: #B01D58 !important;
    font-family: 'AvenirNextLTPro-Demi';
}

/* Titre */
.mmt-highlight-title {
    font-size: 24px !important;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.mmt-highlight-title a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mmt-highlight-title a:hover {
    color: #E84C5B;
}

/* Extrait (2 lignes max) */
.mmt-highlight-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bouton Lire la suite */
.mmt-btn-lire-suite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: auto;
}

/* Couleurs boutons par type */
.mmt-islam-card .mmt-btn-lire-suite {
    background: #E84C5B;
}

.mmt-islam-card .mmt-btn-lire-suite:hover {
    background: #B01D58;
}

.mmt-actu-card .mmt-btn-lire-suite {
    background: #E84C5B;
}

.mmt-actu-card .mmt-btn-lire-suite:hover {
    background: #8a1644;
}

.mmt-video-card-home .mmt-btn-lire-suite {
    background: #E84C5B;
}

.mmt-video-card-home .mmt-btn-lire-suite:hover {
    background: #8a1644;
}

.mmt-btn-lire-suite svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.mmt-btn-lire-suite:hover {
    transform: translateX(3px);
}

.mmt-btn-lire-suite:hover svg {
    transform: translateX(3px);
}

/* ==========================================
   BLOC VIDÉO (harmonisation)
   ========================================== */

.mmt-video-card-home {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mmt-video-player {
    position: relative;
    overflow: hidden;
    height: 280px;
    background: #000;
}

/* Fix bande noire sous la vidéo à la une */
.mmt-video-card-home .mmt-video-player {
    height: 280px;
    overflow: hidden; /* Masquer le débordement */
}

.mmt-video-card-home .mmt-video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Forcer le ratio 16:9 pour la vidéo à la une */
.mmt-video-card-home .mmt-video-player {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.mmt-video-player iframe {
    width: 100%;
    height: 100%;
}

.mmt-video-content {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mmt-video-badge {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    color: #E84C5B;
}

.mmt-video-title {
    font-size: 24px !important;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.mmt-video-title-link {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mmt-video-title-link:hover {
    color: #E84C5B;
}

.mmt-video-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Tablette */
@media (max-width: 980px) {
    .mmt-highlight-image,
    .mmt-video-player {
        height: 240px;
    }
    
    .mmt-highlight-title,
    .mmt-video-title {
        font-size: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mmt-highlight-image,
    .mmt-video-player {
        height: 200px;
    }
    
    .mmt-highlight-content,
    .mmt-video-content {
        padding: 20px 15px;
    }
    
    .mmt-highlight-date {
        top: 15px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .mmt-highlight-title,
    .mmt-video-title {
        font-size: 18px;
    }
    
    .mmt-highlight-excerpt,
    .mmt-video-excerpt {
        font-size: 14px;
    }
}


/* ==========================================
   VERSET DU JOUR
   ========================================== */

.mmt-verse-container {
    padding: 0;
}

.mmt-verse-content {
    text-align: left;
}

/* Traduction française EN PREMIER */
.mmt-verse-text-french {
    font-size: 18px;
    line-height: 1.8;
    color: #fff;
    margin: 0 0 20px 0;
    font-weight: 400;
}

/* Texte arabe EN SECOND (plus petit que avant) */
.mmt-verse-text-arabic {
    font-size: 22px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 25px 0;
    font-weight: 400;
    direction: rtl; /* Direction droite-à-gauche pour l'arabe */
    text-align: right;
    font-family: 'Traditional Arabic', 'Amiri', 'Scheherazade', 'Arial', sans-serif;
    letter-spacing: 0.5px;
}

/* Référence de la sourate */
.mmt-verse-reference {
    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 300;
}

/* Message d'erreur */
.mmt-verse-error {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    color: #fff;
}

/* Responsive */
@media (max-width: 767px) {
    .mmt-verse-text-french {
        font-size: 16px;
    }
    
    .mmt-verse-text-arabic {
        font-size: 20px;
        line-height: 1.6;
    }
    
    .mmt-verse-reference {
        font-size: 13px;
    }
}



/* ==========================================
   RÉSULTATS DE RECHERCHE
   ========================================== */

/* En-tête */
.mmt-search-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #B01D58;
}

.mmt-search-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Grille des résultats */
.mmt-search-results {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.mmt-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mmt-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Item de résultat */
.mmt-search-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mmt-search-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.mmt-search-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Vignette à gauche */
.mmt-search-thumbnail {
    position: relative;
    width: 200px;
    flex-shrink: 0;
    overflow: hidden;
}

.mmt-search-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge type de contenu */
.mmt-search-type {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #B01D58;
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
}

/* Contenu à droite */
.mmt-search-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mmt-search-item-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.mmt-search-link:hover .mmt-search-item-title {
    color: #B01D58;
}

.mmt-search-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aucun résultat */
.mmt-no-results {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
}

.mmt-no-results p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.mmt-no-results ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.mmt-no-results li {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.mmt-no-results li:before {
    content: "→ ";
    color: #B01D58;
    font-weight: bold;
}

/* Pagination */
.mmt-search-pagination {
    margin-top: 40px;
    text-align: center;
}

.mmt-search-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 10px;
}

.mmt-search-pagination li {
    display: inline-block;
}

.mmt-search-pagination a,
.mmt-search-pagination span {
    display: block;
    padding: 10px 15px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mmt-search-pagination a:hover {
    background: #B01D58;
    color: #fff;
}

.mmt-search-pagination .current {
    background: #B01D58;
    color: #fff;
    font-weight: 600;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Tablette */
@media (max-width: 980px) {
    .mmt-columns-2,
    .mmt-columns-3 {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mmt-search-title {
        font-size: 22px;
    }
    
    .mmt-search-link {
        flex-direction: column;
    }
    
    .mmt-search-thumbnail {
        width: 100%;
        height: 200px;
    }
    
    .mmt-search-content {
        padding: 15px;
    }
}


/* ==========================================
   RÉSULTATS DE RECHERCHE
   ========================================== */

/* En-tête */
.mmt-search-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #B01D58;
}

.mmt-search-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Grille des résultats */
.mmt-search-results {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.mmt-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mmt-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Item de résultat */
.mmt-search-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mmt-search-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.mmt-search-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Vignette à gauche */
.mmt-search-thumbnail {
    position: relative;
    width: 200px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.mmt-search-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style pour le placeholder SVG */
.mmt-search-thumbnail.mmt-placeholder img {
    object-fit: contain;
    padding: 20px;
}

/* Contenu à droite */
.mmt-search-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Badge type de contenu (au-dessus du titre) */
.mmt-search-type {
    display: inline-block;
    background: #B01D58;
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 10px;
    align-self: flex-start;
}

.mmt-search-item-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.mmt-search-link:hover .mmt-search-item-title {
    color: #B01D58;
}

.mmt-search-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aucun résultat */
.mmt-no-results {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
}

.mmt-no-results p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.mmt-no-results ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.mmt-no-results li {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.mmt-no-results li:before {
    content: "→ ";
    color: #B01D58;
    font-weight: bold;
}

/* Pagination */
.mmt-search-pagination {
    margin-top: 40px;
    text-align: center;
}

.mmt-search-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 10px;
}

.mmt-search-pagination li {
    display: inline-block;
}

.mmt-search-pagination a,
.mmt-search-pagination span {
    display: block;
    padding: 10px 15px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mmt-search-pagination a:hover {
    background: #B01D58;
    color: #fff;
}

.mmt-search-pagination .current {
    background: #B01D58;
    color: #fff;
    font-weight: 600;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Tablette */
@media (max-width: 980px) {
    .mmt-columns-2,
    .mmt-columns-3 {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mmt-search-title {
        font-size: 22px;
    }
    
    .mmt-search-link {
        flex-direction: column;
    }
    
    .mmt-search-thumbnail {
        width: 100%;
        height: 200px;
    }
    
    .mmt-search-content {
        padding: 15px;
    }
}


/* ==========================================
   RÉSULTATS DE RECHERCHE - VERSION CONSOLIDÉE
   ========================================== */

/* ==========================================
   COMPTEUR DE RÉSULTATS
   ========================================== */
.mmt-search-count {
    margin-bottom: 30px;
    padding: 15px 20px;
    background: #f9f9f9;
    border-left: 4px solid #e84c5b;
    border-radius: 4px;
}

.mmt-search-count p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.mmt-search-count strong {
    color: #333;
    font-weight: 600;
}

/* ==========================================
   GRILLE DES RÉSULTATS - FORCE POUR TOUS
   ========================================== */
body.search .mmt-search-results,
body.search-results .mmt-search-results {
    display: grid !important;
    gap: 30px !important;
    margin-bottom: 40px;
    width: 100%;
}

body.search .mmt-search-results.mmt-columns-2,
body.search-results .mmt-search-results.mmt-columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

body.search .mmt-search-results.mmt-columns-3,
body.search-results .mmt-search-results.mmt-columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ==========================================
   ITEM DE RÉSULTAT - FORCE POUR TOUS
   ========================================== */
body.search .mmt-search-results .mmt-search-item,
body.search-results .mmt-search-results .mmt-search-item {
    background: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: block !important;
    width: 100% !important;
}

body.search .mmt-search-results .mmt-search-item:hover,
body.search-results .mmt-search-results .mmt-search-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ==========================================
   LIEN - AFFICHAGE HORIZONTAL
   ========================================== */
body.search .mmt-search-results .mmt-search-link,
body.search-results .mmt-search-results .mmt-search-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
    width: 100% !important;
}

/* ==========================================
   VIGNETTE À GAUCHE
   ========================================== */
body.search .mmt-search-results .mmt-search-thumbnail,
body.search-results .mmt-search-results .mmt-search-thumbnail {
    position: relative !important;
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
}

body.search .mmt-search-results .mmt-search-thumbnail img,
body.search-results .mmt-search-results .mmt-search-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================
   PLACEHOLDER IMAGE
   ========================================== */
body.search .mmt-search-results .mmt-search-placeholder,
body.search-results .mmt-search-results .mmt-search-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

body.search .mmt-search-results .mmt-search-placeholder svg,
body.search-results .mmt-search-results .mmt-search-placeholder svg {
    width: 60px;
    height: 60px;
    color: #c0c0c0;
}

/* ==========================================
   CONTENU À DROITE
   ========================================== */
body.search .mmt-search-results .mmt-search-content,
body.search-results .mmt-search-results .mmt-search-content {
    padding: 20px 25px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* ==========================================
   BADGE CATÉGORIE (AU-DESSUS DU TITRE)
   ========================================== */
body.search .mmt-search-results .mmt-search-badge,
body.search-results .mmt-search-results .mmt-search-badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    margin-bottom: 12px !important;
    align-self: flex-start !important;
    letter-spacing: 0.5px !important;
}

/* COULEURS DES BADGES PAR CATÉGORIE */
body.search .mmt-search-results .mmt-search-badge.cat-actualites,
body.search .mmt-search-results .mmt-search-badge.cat-article,
body.search-results .mmt-search-results .mmt-search-badge.cat-actualites,
body.search-results .mmt-search-results .mmt-search-badge.cat-article {
    background: #e84c5b;
    color: #fff;
}

body.search .mmt-search-results .mmt-search-badge.cat-conferences,
body.search .mmt-search-results .mmt-search-badge.cat-conference,
body.search-results .mmt-search-results .mmt-search-badge.cat-conferences,
body.search-results .mmt-search-results .mmt-search-badge.cat-conference {
    background: #e84c5b;
    color: #fff;
}

body.search .mmt-search-results .mmt-search-badge.cat-islam,
body.search-results .mmt-search-results .mmt-search-badge.cat-islam {
    background: #e84c5b;
    color: #fff;
}

body.search .mmt-search-results .mmt-search-badge.cat-video,
body.search-results .mmt-search-results .mmt-search-badge.cat-video {
    background: #5bc0de;
    color: #fff;
}

body.search .mmt-search-results .mmt-search-badge.cat-contenu,
body.search-results .mmt-search-results .mmt-search-badge.cat-contenu {
    background: #999;
    color: #fff;
}

/* ==========================================
   TITRE
   ========================================== */
body.search .mmt-search-results .mmt-search-item-title,
body.search-results .mmt-search-results .mmt-search-item-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
}

body.search .mmt-search-results .mmt-search-link:hover .mmt-search-item-title,
body.search-results .mmt-search-results .mmt-search-link:hover .mmt-search-item-title {
    color: #e84c5b !important;
}

/* ==========================================
   EXTRAIT
   ========================================== */
body.search .mmt-search-results .mmt-search-excerpt,
body.search-results .mmt-search-results .mmt-search-excerpt {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #666 !important;
    margin: 0 !important;
}

/* ==========================================
   AUCUN RÉSULTAT
   ========================================== */
.mmt-no-results {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
}

.mmt-no-results p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.mmt-no-results ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.mmt-no-results li {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.mmt-no-results li:before {
    content: "→ ";
    color: #e84c5b;
    font-weight: bold;
}

/* ==========================================
   PAGINATION
   ========================================== */
.mmt-search-pagination {
    margin-top: 40px;
    text-align: center;
}

.mmt-search-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 10px;
}

.mmt-search-pagination li {
    display: inline-block;
}

.mmt-search-pagination a,
.mmt-search-pagination span {
    display: block;
    padding: 10px 15px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mmt-search-pagination a:hover {
    background: #e84c5b;
    color: #fff;
}

.mmt-search-pagination .current {
    background: #e84c5b;
    color: #fff;
    font-weight: 600;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Tablette */
@media (max-width: 980px) {
    body.search .mmt-search-results.mmt-columns-2,
    body.search .mmt-search-results.mmt-columns-3,
    body.search-results .mmt-search-results.mmt-columns-2,
    body.search-results .mmt-search-results.mmt-columns-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mmt-search-count {
        padding: 12px 15px;
    }
    
    .mmt-search-count p {
        font-size: 14px;
    }
    
    body.search .mmt-search-results .mmt-search-link,
    body.search-results .mmt-search-results .mmt-search-link {
        flex-direction: column !important;
    }
    
    body.search .mmt-search-results .mmt-search-thumbnail,
    body.search-results .mmt-search-results .mmt-search-thumbnail {
        width: 100% !important;
        height: 220px !important;
        min-width: 100% !important;
    }
    
    body.search .mmt-search-results .mmt-search-content,
    body.search-results .mmt-search-results .mmt-search-content {
        padding: 20px !important;
    }
    
    body.search .mmt-search-results .mmt-search-item-title,
    body.search-results .mmt-search-results .mmt-search-item-title {
        font-size: 18px !important;
    }
}





/* ==========================================
   STRUCTURE FLEXBOX POUR LES 3 BLOCS
   ========================================== */

/* Ligne contenant les 3 blocs */
.ligne_3blocs {
    display: flex;
    align-items: stretch;
}

/* Chaque colonne devient un conteneur flexbox vertical */
.ligne_3blocs .et_pb_column {
    display: flex !important;
    flex-direction: column !important;
}

/* Le module texte des horaires (dernier enfant) se colle en bas */
.ligne_3blocs .et_pb_column > .et_pb_module:last-child {
    margin-top: auto !important;
}

/* ==========================================
   BLOC JOUR DE LA SEMAINE - LARGEUR AUTO
   ========================================== */

/* Force le module contenant le jour à ne pas prendre toute la largeur */
.jour_de_la_semaine {
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
}

/* Si le jour est dans un module texte Divi, on force aussi le conteneur */
.et_pb_text .jour_de_la_semaine {
    display: inline-block !important;
}

/* Force le module texte parent à ne pas s'étirer */
.ligne_3blocs .et_pb_text:has(.jour_de_la_semaine) {
    width: auto !important;
    display: inline-block !important;
}

/* Alternative si :has() ne fonctionne pas - cibler directement par position */
.ligne_3blocs .et_pb_column > .et_pb_text:nth-child(2) {
    width: auto !important;
    display: inline-block !important;
}

/* ==========================================
   ALIGNEMENT NATUREL DES ÉLÉMENTS
   ========================================== */

.ligne_3blocs .et_pb_image {
    margin-bottom: 20px;
}

.ligne_3blocs .et_pb_text {
    margin-bottom: 20px;
}

.ligne_3blocs .et_pb_column > .et_pb_module:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 980px) {
    .ligne_3blocs {
        display: block;
    }
    
    .ligne_3blocs .et_pb_column {
        display: block !important;
    }
    
    .ligne_3blocs .et_pb_column > .et_pb_module:last-child {
        margin-top: 0 !important;
    }
}


/* ============================================================================
   CSS PERSONNALISÉ - MOSQUÉE MIRAIL TOULOUSE
   Style qui était dans "personnaliser de WP"
   ============================================================================ */

/* ============================================================================
   HORAIRES DE PRIÈRE - HEADER
   ============================================================================ */

div.horaires_tlse {
	/*border : 1px solid #fff;*/
	text-align: center !important; 
}

div.horaires_tlse ul.cal_header {
	display: flex;
	flex-direction: row; 
	width: auto;
	justify-content: space-between;
	padding: 0 !important;
}

div.horaires_tlse ul.cal_header li {
	display: block;
	color: #fff;
	/*border-right : 1px solid #fff;*/
	flex-grow: 1;
	text-transform: uppercase;
}

div.horaires_tlse ul.cal_header li {
	font-size: 12px;
	line-height: 16px;
	padding: 5px 0;
}

/* Responsive - Mobile */
@media (max-width: 980px) {
	div.horaires_tlse ul.cal_header #date-hijri, 
	div.horaires_tlse ul.cal_header #date-gregorian, 
	div.horaires_tlse ul.cal_header .barre,
	div.horaires_tlse ul.cal_header li div span {
		display: none;
	}
	
	div.horaires_tlse ul.cal_header li {
		font-size: 12px;
		line-height: 16px;
	}
}


/* ============================================================================
   BARRE DE RECHERCHE - BOUTON FERMER (X)
   ============================================================================ */

/* Couleur de l'icône "fermer" (X) dans la barre de recherche */
.et_pb_menu .et_pb_menu__close-search-button::before,
.et_pb_menu .et_pb_menu__close-search-button::after {
	color: #B01D58 !important;
	opacity: 1 !important;
}

/* Couleur au survol */
.et_pb_menu .et_pb_menu__close-search-button:hover::before,
.et_pb_menu .et_pb_menu__close-search-button:hover::after {
	color: #E84C5B !important;
}

/* Taille/épaisseur */
.et_pb_menu .et_pb_menu__close-search-button { 
	font-size: 22px; 
}


/* ============================================================================
   MEGA MENU - CONFIGURATION MOBILE
   ============================================================================ */

/* Mobile : laisser visible le conteneur du menu Divi, mais cacher le menu mobile natif */
@media (max-width: 981px) {
	/* Divi cache .et-menu-nav en mobile : on annule pour voir MMM */
	.et_pb_menu .et-menu-nav { 
		display: block !important;
	}

	/* Cacher le hamburger et le menu mobile NATIFS de Divi */
	.mobile_menu_bar,
	.et_mobile_nav_menu,
	.et_mobile_menu {
		display: none !important;
	}

	/* NE PAS cacher le conteneur global du menu (sinon MMM disparaît) */
	.et_pb_menu__menu { 
		display: block !important;
	}

	/* Forcer l'affichage et l'alignement du bouton hamburger MMM */
	#mega-menu-wrap-primary-menu { 
		width: 100%; 
		position: relative; 
		z-index: 99999;
	}
	
	#mega-menu-wrap-primary-menu .mega-menu-toggle {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Ordre du logo / recherche / burger sur mobile */
	.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__wrap {
		flex-direction: row-reverse !important;
		justify-content: end !important;
		align-items: center !important;
		gap: 10px;
	}
}


/* ============================================================================
   BOUTON "FAIRE UN DON" DANS LE MENU
   ============================================================================ */

#mega-menu-wrap-primary-menu .bouton-don > a {
	background-color: #E64C5B !important;
	color: #fff !important;
	padding: 0px 20px !important;
	border-radius: 50px !important;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s ease;
	line-height: 40px !important;
	height: 40px !important;
}

#mega-menu-wrap-primary-menu .bouton-don > a:hover {
	background-color: #B01D58 !important;
	color: #fff !important;
}

@media (max-width: 981px) {
	#mega-menu-wrap-primary-menu .bouton-don > a {
		margin: 0 10px !important;
	}
}


/* ============================================================================
   HOME - ENCART PROGRAMME
   ============================================================================ */

.encart_prog h2 {
	border-bottom: 1px #999 dashed;
	padding-bottom: 10px !important;
}

.prog,
.prog tr, 
.prog td, 
.prog th {
	border: none !important;
	box-shadow: none !important;
}

.prog .jour {
	background: #E64C5B !important;
	color: #fff;
}

.prog .theme {
	background: #F5F5F5 !important;
}


/* ============================================================================
   FIN DU CSS PERSONNALISÉ
   ============================================================================ */


   /* ============================================================================
   CSS POUR PROCHAINE PRIÈRE ET CLIGNOTEMENT
   Fichier : mosquee-mirail-prayer-highlight.css
   Mosquée Mirail - Toulouse
   ============================================================================ */

/* ============================================================================
   STYLE POUR LA PROCHAINE PRIÈRE
   Fond blanc + Texte #B01D58
   ============================================================================ */

.next-prayer {
    background-color: #ffffff !important;
    color: #B01D58 !important;
    font-weight: bold !important;
    padding: 5px 5px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
}

.next-prayer div {
    color: #B01D58 !important;
    font-weight: bold !important;
}

.next-prayer span {
    color: #B01D58 !important;
}


/* ============================================================================
   ANIMATION DE CLIGNOTEMENT
   Pendant 1 minute quand l'heure de la prière arrive
   ============================================================================ */

@keyframes prayer-call-blink {
    0% {
        background-color: #B01D58;
        color: #ffffff;
    }
    50% {
        background-color: #ffffff;
        color: #B01D58;
    }
    100% {
        background-color: #B01D58;
        color: #ffffff;
    }
}

.prayer-call {
    animation: prayer-call-blink 1s ease-in-out infinite !important;
    padding: 5px 3px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
}

.prayer-call div {
    font-weight: bold !important;
}


/* ============================================================================
   AJUSTEMENTS RESPONSIVE
   ============================================================================ */

@media (max-width: 980px) {
    .next-prayer,
    .prayer-call {
        padding: 5px 3px !important;
        border-radius: 0px !important;
    }
}


/* ============================================================================
   NOTES :
   - .next-prayer : appliqué à la prochaine prière (fond blanc + texte #B01D58)
   - .prayer-call : appliqué pendant 1 minute dès l'heure de la prière (clignotement)
   - Les classes sont gérées automatiquement par mosquee-mirail-principal.js
   ============================================================================ */