/*
Theme Name: MAMOUM
Theme URI: https://www.mamoum.org/themes/mamoum/
Author: The MAMOUM team
Author URI: https://www.mamoum.org
Description: The MAMOUM's Website 
*/
/* Styles généraux et réinitialisation */


body {  
        line-height: 1.6; 
        padding: auto;
        margin: auto;
        font-family: Galyon, Verdana, Montserrat, sans-serif;
        width: 1200px;
        background-color: #EEE;
    } 

.empty
{
    clear: both;
}

#container
{
    /*background-color: #fff;*/
    clear:both;
}

/*
#hugeContainer
{
    /*background-color: #fff;
}
*/

#head
{
    background-color: #FFF;
}

#headTop
{
    color: #0a4c7f;
    font-size: 0.8rem;
    clear: both;

}

#headTop a
{
    text-decoration: none;
    color:#0a4c7f;
}

#soutenirButtonHead
{
    background-color: #0a4c7f;
    color: #fff !important;;
    padding:1%;
    margin-top: 0;
    display: inline-block;
}

#headTopLeft
{
    float:left;
    width: 45%;
    padding:1% 1% 0 1%;
}

#headTopRight
{
    float:right;
    width: 45%;
    text-align: right;
    padding:1% 1% 0 1%; 
}

#headCenter
{
    clear: both;
}

/* Styles de la barre de navigation */
.navbar {
    /*background-color: #333;
    /*color: #fff;*/
    background-color: #fff;
    color: #0a4c7f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0rem 1rem 2rem;
    /*border-top: 1px solid #0a4c7f;
    border-bottom: 1px solid #0a4c7f;
    /*position: fixed; /* Rendre le menu fixe en haut */
   /* width: 100%;
    top: 0;
    left: 0;
   /* z-index: 1000; /* Assurer que le menu est au-dessus des autres éléments */
}

.navbar .logo {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar .nav-links {
    list-style: none;
    display: flex; /* Affiche les éléments de la nav en ligne */
    background-color:#0a4c7f;
    padding-left: 0;
}

.navbar .nav-links li {
    position: relative; /* Nécessaire pour les sous-menus déroulants */
}

.navbar .nav-links li a {
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1rem;
    display: block; /* Pour que le padding s'applique à toute la zone cliquable */
    transition: background-color 0.3s ease;
}

.navbar .nav-links li a:hover {
    background-color: #FFF;
    color: #0a4c7f;
    padding: 0.7    rem 1rem 0.7rem 1rem;
    border-top: 1px solid #0a4c7f;
    border-bottom: 1px solid #0a4c7f;
}

/* Styles du sous-menu déroulant */
.dropdown-menu {
    display: none; /* Cache le sous-menu par défaut */
    position: absolute;
    /*background-color: #444;*/
    background-color:#0a4c7f;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%; /* Place le sous-menu juste en dessous de l'élément parent */
    left: 0;
    list-style: none;
}

.dropdown-menu li a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-menu li a:hover {
    background-color: #666;
}

/* Afficher le sous-menu au survol */
.dropdown:hover .dropdown-menu {
    display: block;
    padding-left:0;
}

/* Icône du menu hamburger pour mobile */
.menu-icon {
    display: none; /* Cache l'icône par défaut sur les grands écrans */
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
}

#menu-toggle {
    display: none; /* Cache la checkbox qui contrôle le menu */
}


/* Media Queries pour le Responsive Design */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    }

    .navbar .nav-links {
        width: 100%; /* Prend toute la largeur disponible */
        flex-direction: column; /* Les éléments de la nav s'empilent verticalement */
        display: none; /* Cache le menu par défaut sur mobile */
        text-align: center;
        background-color: #333; /* Pour un fond uni sur le menu mobile */
        margin-top: 1rem; /* Espace sous le logo/hamburger */
    }

    .navbar .nav-links li {
        width: 100%; /* Chaque élément prend toute la largeur */
        border-bottom: 1px solid #555; /* Séparateur entre les éléments */
    }

    .navbar .nav-links li:last-child {
        border-bottom: none;
    }

    .navbar .nav-links li a {
        padding: 1rem; /* Plus de padding pour les liens mobiles */
    }

    .navbar .nav-links .dropdown-menu {
        position: static; /* Le sous-menu reste dans le flux sur mobile */
        display: none; /* Caché par défaut */
        width: 100%;
        background-color: #555; /* Fond plus foncé pour les sous-menus mobiles */
        padding-left: 1rem; /* Indentation pour les sous-éléments */
        box-shadow: none; /* Pas d'ombre sur mobile */
    }

    /* Afficher le menu et les sous-menus quand la checkbox est cochée */
    #menu-toggle:checked ~ .nav-links {
        display: flex; /* Affiche le menu entier */
    }

    .dropdown > a .fa-caret-down {
        display: inline-block; /* Pour montrer l'icône du chevron */
    }

    /* Afficher le sous-menu quand son parent est cliqué (ou survolé) */
    /* Pour mobile, on utilise JavaScript ou on clique sur le lien principal */
    /* Une approche plus simple pour le CSS est de toujours les montrer si le menu parent est visible */
    .dropdown.active .dropdown-menu,
    .dropdown:hover .dropdown-menu { /* Maintenu pour la compatibilité sur les tablettes qui supportent le hover */
        display: flex;
        flex-direction: column;
    }


    .menu-icon {
        display: block; /* Affiche l'icône du hamburger sur mobile */
    }

    /* Rotation de l'icône pour indiquer l'ouverture/fermeture */
    #menu-toggle:checked + .menu-icon .fa-bars {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }
}


#contentCenter
{
    clear: both;
}

#causes, #impact, #becomeMember, #news, #event
{
    margin-bottom: 20px;
}

#causes
{
    clear:both;

}

#impact
{
    clear:both;
    font-size: bold;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

#becomeMember
{
    border:1px solid red;
    clear:both;
    margin-top: 1rem;
}

#news
{
    clear:both;
}

#news a
{
    color:#000;
    text-decoration: none;
}

.newsItem a
{
    text-decoration: none;
    color:#000;
}

.newsItemTitle
{
    font-weight: bold;
    font-size: 1.2rem;

}

.newsItemContent
{
    text-align: justify;
}

#becomeVolumteer
{
    clear:both;
    background-color: #33a936;
    margin-bottom: 1rem;
    padding:1%;
}

#buttonBecomeVolumteer
{
    padding:1%;
    background-color: #FFF;
    color:#666;
}

#becomeVolumteerTitle
{
    width: 50%;
    float: left;
    padding: 5% 0 5% 6%;
    color:#FFF;
    font-weight: bold;
    font-size: 2rem;
}

#becomeVolumteerButtom
{
    width: 30%;
    float: right;
    text-align: right;
    padding: 9% 8% 6% 0;
}

#becomeVolumteerButtom a
{
    background-color: #FFF;
    color:#666;
    font-size: 1em;
    padding:5%;
    text-decoration: none;
    font-weight: bold;
}

#event
{

    clear:both;
}

#event a
{
    text-decoration: none;
    color: #000;
}

.eventItem
{
    background-color: #fff;
    margin-bottom: 1em;
    padding: 1em 0 1em 0;
}

.eventItemImage
{
    float:left;
    width: 16%;
    margin-right: 1%;
}

.eventDescription
{
    float:left;
    width: 82%;
}

.eventItemTitle
{
    font-size: 1.8em;
    font-weight: bold;
    width: 82%;
}

/*
.eventItemContent
{

}
*/


.eventItemMore
{
    width: 10%;
    height: 5%;
    background-color: #EEE;
    border:1px solid #666;
    float: left;
}

.titleBloc
{
    font-weight: bold;
    font-size: 1.5rem;
    font-family: sans-serif;

}

.causesItem, .impactItem, .newsItem
{
    width: 30%;
    float:left;
    background-color: #FFF;
    padding:1%; 
    margin: 0 1.1% 0% 0%
}

.impactItemTitle
{
    text-align: center;
    font-size: 2rem;

}

.impactItemContent
{
    font-size: 8rem;
    text-align: center;
    font-weight: bold;
}

#becomeMember
{
    clear: both;
}

#footer
{
    background-color: #0a4c7f;
    font-size: 0.8em;
}

#footer a
{
    color:#FFF;
}

.footerPanel
{
    width: 25%;
    float:left;
}

.footerPanelHead
{
    color:#FFF;
    padding:1% 1% 1% 15%;
    font-weight: bold;
    text-align: left;
    font-size: 1.1rem;
}

.footerPanelContent
{
    padding-left: 4%;
}

#footerPanelContentSocial
{
    margin-top:2em;
    text-align: center;
    color:#FFF;
}

.footerPanelContent ul
{
    margin-left: 0;
    padding-left: 2.5em;
    padding-right: 2.5em;
}

.footerPanelContent ul li
{
    list-style-type: square;
    color: white;
}

.footerPanelContent a
{
    text-decoration: none;
}

#footerPanelIcon
{
    text-align: center;
    padding-top:2%;
}
#footerPanelDescription
{
    text-align: center;
    color:#FFF;
}

#footerPanelDescription a
{
    text-decoration: none;
}

#footerBottom
{
    clear:both;
    font-size: 0.8rem;  
    text-align: center;
    padding: 1%;
    color:#EEE;
}



#contentPage
{
    background-color: #FFF;
    font-size: 1rem;
    padding:3%;
    border-top: 5px solid #0a4c7f;
}

/* Conteneur principal avec l'image de fond */
.background-container {
    width: 80%; /* Ou une largeur fixe comme 600px */
    max-width: 800px; /* Limite la largeur maximale */
    height: 400px; /* Hauteur de votre div */
    background-image: url('assets/sante.jpg'); /* REMPLACER PAR LE CHEMIN DE VOTRE IMAGE */
    background-size: cover; /* L'image couvre toute la zone, sans déformation */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    position: relative; /* Très important pour positionner le texte en filigrane */
    overflow: hidden; /* Assurez-vous que rien ne déborde */
    display: flex; /* Utilisation de flexbox pour centrer le texte */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Conteneur principal avec l'image de fond */
.causeItemEducation {
    
    background-image: url('assets/educ.jpg'); /* REMPLACER PAR LE CHEMIN DE VOTRE IMAGE */
    background-size:contain;/* L'image couvre toute la zone, sans déformation */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    position: relative; /* Très important pour positionner le texte en filigrane */
    overflow: hidden; /* Assurez-vous que rien ne déborde */
    display: flex; /* Utilisation de flexbox pour centrer le texte */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%;
    float:left;
    background-color: #FFF;
    padding:1%; 
    margin: 0 1.1% 0% 0%;
    height: 300px;
}

.causeItemSante {
    
    background-image: url('assets/santem.jpg'); /* REMPLACER PAR LE CHEMIN DE VOTRE IMAGE */
    background-size:contain;/* L'image couvre toute la zone, sans déformation */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    position: relative; /* Très important pour positionner le texte en filigrane */
    overflow: hidden; /* Assurez-vous que rien ne déborde */
    display: flex; /* Utilisation de flexbox pour centrer le texte */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%;
    float:left;
    background-color: #FFF;
    padding:1%; 
    margin: 0 1.1% 0% 0%;
    height: 300px;
}

.causeItemFormation {
    
    background-image: url('assets/educfinanciere.jpg'); /* REMPLACER PAR LE CHEMIN DE VOTRE IMAGE */
    background-size:contain;/* L'image couvre toute la zone, sans déformation */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    position: relative; /* Très important pour positionner le texte en filigrane */
    overflow: hidden; /* Assurez-vous que rien ne déborde */
    display: flex; /* Utilisation de flexbox pour centrer le texte */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%;
    float:left;
    background-color: #FFF;
    padding:1%; 
    margin: 0 1.1% 0% 0%;
    height: 300px;
}

/* Style du texte en filigrane */
.watermark-text {
    font-size: 2.5em; /* Grande taille de texte pour le filigrane */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.66); /* Texte blanc semi-transparent */
    /* OU color: rgba(0, 0, 0, 0.3); pour du texte noir semi-transparent */
    text-transform: uppercase; /* Met le texte en majuscules */
    letter-spacing: 5px; /* Espacement entre les lettres */
    user-select: none; /* Empêche la sélection du texte */
    pointer-events: none; /* Empêche le texte de bloquer les événements de la souris */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Légère ombre pour la lisibilité */

    /* Pour les navigateurs plus anciens ou une opacité globale */
    /* opacity: 0.5; */
}

/*
.newsItemImage 
{

}
*/
#rollingBar
{
    border:1px sold red;
    position: relative;
    padding-top: 10px;
    padding-bottom: 20px;
    right: 50%;
    left: 50%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100vw;
    -ms-flex: 0 0 100vw;
    flex: 0 0 100vw;
    width: 100vw;
    max-width: none;
    margin-right: -50vw !important;
    margin-left: -50vw !important;
    color:#FFF;
    background-color: #0a4c7f;
    margin-bottom:20px;
}

#rollingBar a
{
    text-decoration: none;
    color:#fff;
}

#rollingBarContainer
{
    margin: auto;
    width: 1200px;
}

#rollingBarTitle
{
    font-weight: bold;
    font-size: 2rem;
}

/* Conteneur de l'image (optionnel, mais souvent utile pour la mise en page) */
.image-container {
    display: flex;
    justify-content: center; /* Centre l'image horizontalement */
    margin-bottom: 10px;
    /* max-width: 200px; /* Si vous voulez que le conteneur lui-même ne dépasse pas 200px */
    /* margin: 0 auto; */
}

/* Styles de l'image pour la rendre fixe et responsive */
.image-container img {
    width: 150px; /* La largeur fixe désirée */
    height: 150px; /* La hauteur fixe désirée */
    object-fit: cover; /* Important : Garantit que l'image couvre toute la zone, sans être déformée */
    /* Alternative: object-fit: contain; si vous voulez que l'image entière soit visible (peut laisser des bandes vides) */
    display: block; /* Supprime l'espace sous l'image si elle est inline par défaut */
    /*border-radius: 8px; /* Optionnel: coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
}

/* Media Query pour le responsive */
@media (max-width: 150px) {
    /* Lorsque la largeur disponible est inférieure à 200px */
    .image-container img {
        width: 100%; /* L'image prend 100% de la largeur de son conteneur */
        height: auto; /* La hauteur s'ajuste proportionnellement pour maintenir l'aspect ratio */
        /* object-fit: contain; ou cover selon l'effet désiré ici si l'aspect ratio change */
    }

    /* Si vous voulez que le conteneur s'ajuste aussi */
    .image-container {
        max-width: 100%;
        margin: 0 auto;
    }
}


/* Styles de l'image pour la rendre fixe et responsive */
.newsItemImage img {
    width: 360px; /* La largeur fixe désirée */
    height: 360px; /* La hauteur fixe désirée */
    object-fit: cover; /* Important : Garantit que l'image couvre toute la zone, sans être déformée */
    /* Alternative: object-fit: contain; si vous voulez que l'image entière soit visible (peut laisser des bandes vides) */
    display: block; /* Supprime l'espace sous l'image si elle est inline par défaut */
    /*border-radius: 8px; /* Optionnel: coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
}

/* Media Query pour le responsive */
@media (max-width: 150px) {
    /* Lorsque la largeur disponible est inférieure à 200px */
    .newsItemImage img {
        width: 100%; /* L'image prend 100% de la largeur de son conteneur */
        height: auto; /* La hauteur s'ajuste proportionnellement pour maintenir l'aspect ratio */
        /* object-fit: contain; ou cover selon l'effet désiré ici si l'aspect ratio change */
    }

    /* Si vous voulez que le conteneur s'ajuste aussi */
    .newsItemImage {
        max-width: 100%;
        margin: 0 auto;
    }
}


#rollingBarImage
{
    position:relative;
}

#rollingBarImage img
{
    width: 100%; /* La largeur fixe désirée */
    /* height: 150px; La hauteur fixe désirée */
    object-fit: cover; /* Important : Garantit que l'image couvre toute la zone, sans être déformée */
    /* Alternative: object-fit: contain; si vous voulez que l'image entière soit visible (peut laisser des bandes vides) */
    display: block; /* Supprime l'espace sous l'image si elle est inline par défaut */
    /*border-radius: 8px; /* Optionnel: coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
}

#rollingBarContent
{
    padding:2% 2% 1% 2%;
    position:absolute;
    background-color: rgba(0, 0, 0, 0.5);
    bottom:0;
}

#moreNews
{
    background-color: #FFF;
    padding:4%;
    margin-bottom: 20px;
    margin-top: 20px;
}



.home-carousel {
    width: 100%;
    position: relative;
    margin: 30px auto;
}

.carousel-slide-item {
    height: 480px;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    
}

.carousel-overlay {
    /*background: rgba(0, 0, 0, 0.55);*/
    padding: 0;
    
    width: 100%;
    color: #fff;
    height: 470px;
}

.carousel-title {
    font-size: 2rem;
    margin: 0 0 12px;
    font-weight: 700;
    line-height: 1.2;
}

.carousel-excerpt {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    max-width: 750px;
}

.carousel-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #33a936;
    color: #000;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: #33a936;
    color: #000;
}

/* Boutons Swiper */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #33a936 !important;
}

.carousel-text
{
    position: absolute;
    bottom:0;
    background: rgba(0, 0, 0, 0.55);
    padding: 2% 2% 1% 2%;
}


.archive-header {
    padding: 28px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 18px;
}
.archive-title {
    margin: 0 0 8px;
    font-size: 2rem;
}
.archive-description {
    color: #555;
    font-size: 1rem;
}

/* Grid des posts */
.archive-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 22px 0;
}

/* Card */
.archive-post-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 22px rgba(6,24,44,0.06);
    height: 100%;
}
.archive-post-card__thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.archive-post-card__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.archive-post-card__title { margin: 0; font-size: 2.1rem; }
.archive-post-card__title a { color: inherit; text-decoration: none; font-size: 2rem;}
.archive-post-card__meta { font-size: 0.9rem; color: #777; }
.archive-post-card__excerpt { color: #444; font-size: 0.95rem; margin-top: 6px; }
.archive-post-card__readmore { margin-top: auto; display: inline-block; padding: 8px 12px; background:#33a936; color:#fff; border-radius:6px; text-decoration:none; }

/* Pagination */
.pagination { text-align:center; margin-top: 26px; }
.pagination__list { display:inline-flex; list-style:none; gap:8px; padding:0; margin:0; }
.pagination__item a { padding: 8px 12px; border-radius:6px; text-decoration:none; border:1px solid rgba(0,0,0,0.06); color:inherit; }
.pagination__item .current { background:#111; color:#fff !important; border-color:transparent; }