/* ==========================================================================
   2. ARTICLES DU BLOG ET CARTES
   ========================================================================== */

/* Cartes d'articles de la grille */
.com-content-category-blog__items .blog-item article {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 20px;
    border-radius: 6px;
}

/* Bouton Lire la suite en bas */
.com-content-category-blog__items .blog-item article .readmore {
    margin-top: auto !important;
    padding-top: 15px;
}

/* Marges d'images dans le corps des articles */
.com-content-article__body .item-image.float-start, 
.com-content-article__body img[style*="float: left"],
.com-content-article__body .pull-left img,
.k2SingleImageView,
.itemImageBlock,
.com-content-article__body .itemImage,
.com-content-article__body img.k2-image {
    float: left !important;
    margin-right: 25px !important;
    margin-bottom: 15px !important;
}

/* ==========================================================================
   3. FICHE GLOSSAIRE
   ========================================================================== */

.glossaire .blog-item,
.glossaire article {
    background-color: #f8f9fa !important;
    border-left: 5px solid #0d6efd !important;
    border-radius: 6px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.glossaire h2,
.glossaire .page-header h2 {
    color: #0d6efd !important;
    font-weight: bold !important;
    font-size: 1.8rem !important;
    border-bottom: 2px solid #dee2e6 !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* ==========================================================================
   4. JEVENTS (LISTE DES ÉVÉNEMENTS PASSÉS)
   ========================================================================== */

.jev_listview, .jev_results {
    margin-top: 1.5rem;
}

.jev_listrow, .jev_listrow_archive {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-left: 5px solid #6c757d;
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jev_listrow:hover, .jev_listrow_archive:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.jev_listrow .jev_listtitle, 
.jev_listrow_archive .jev_listtitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2b2d42;
    margin-bottom: 0.5rem;
}

.jev_listrow .jev_listdate, 
.jev_listrow_archive .jev_listdate {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.jev_listrow .jev_listcat, 
.jev_listrow_archive .jev_listcat {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.jev_pagination, .jev_nav_bar {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* ==========================================================================
   5. FICHE DÉTAILLÉE D'UN ALBUM (GRID 2 COLONNES)
   ========================================================================== */

.com-content-article .item-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.com-content-article .item-image,
.com-content-article .article-details .pull-left,
.com-content-article figure.item-image {
    margin: 0 !important;
    float: none !important;
    width: 100%;
}

.com-content-article .item-image img,
.com-content-article figure.item-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid #e9ecef;
}

.com-content-article [itemprop="articleBody"] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2b2d42;
}

@media (max-width: 768px) {
    .com-content-article .item-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .com-content-article .item-image {
        max-width: 250px;
        margin: 0 auto 1rem auto !important;
    }
}


/* ==========================================================================
   6. Style des onglets de sous-catégories
   ========================================================================== */

/* Style des onglets de sous-catégories et listes d'articles */
.mod-articlescategories ul,
.mod-articlescategory ul,
.com-content-category__subcategories ul,
.category-list ul {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 8px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 20px !important;
}

.mod-articlescategories ul li,
.mod-articlescategory ul li,
.com-content-category__subcategories ul li,
.category-list ul li {
    display: inline-flex !important;
    margin: 0 !important;
}

.mod-articlescategories ul li a,
.mod-articlescategory ul li a,
.com-content-category__subcategories ul li a,
.category-list ul li a {
    display: inline-block !important;
    padding: 8px 16px !important;
    background-color: #f1f3f5 !important;
    color: #333 !important;
    text-decoration: none !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease-in-out !important;
}

.mod-articlescategories ul li a:hover,
.mod-articlescategories ul li.active a,
.mod-articlescategory ul li a:hover,
.com-content-category__subcategories ul li a:hover,
.category-list ul li a:hover {
    background-color: #0d6efd !important;
    color: #fff !important;
}
ul.mod-articlescategories,
.categories-module.mod-list {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 8px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

ul.mod-articlescategories > li,
.categories-module.mod-list > li {
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.mod-articlescategories > li > a,
.categories-module.mod-list > li > a {
    display: inline-block !important;
    padding: 8px 16px !important;
    background-color: #f1f3f5 !important;
    color: #212529 !important;
    text-decoration: none !important;
    border-radius: 20px !important;
    border: 1px solid #dee2e6 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease-in-out !important;
}

/* Effet au survol (hover) */
ul.mod-articlescategories > li > a:hover,
.categories-module.mod-list > li > a:hover {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}
ul.mod-articlescategories > li > a {
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Effet d'enfoncement au clic */
ul.mod-articlescategories > li > a:active {
    transform: scale(0.96) !important;
}
/* Bouton actif / page en cours */
ul.mod-articlescategories > li.active > a,
ul.mod-articlescategories > li.current-item > a {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3) !important;
}

/* ==========================================================================
   6. Style articles liés par tag
   ========================================================================== */

/* Grille en 3 colonnes pour les éléments similaires / tags */
.mod-tagssimilar ul,
ul.tagssimilar,
.mod-articlesrelated ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 15px 0 !important;
}

/* Style des cartes */
.mod-tagssimilar ul li,
ul.tagssimilar li,
.mod-articlesrelated ul li {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mod-tagssimilar ul li a,
ul.tagssimilar li a,
.mod-articlesrelated ul li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    color: #212529 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Survol de chaque carte */
.mod-tagssimilar ul li a:hover,
ul.tagssimilar li a:hover,
.mod-articlesrelated ul li a:hover {
    background-color: #ffffff !important;
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Adaptation pour smartphones (1 seule colonne sous 768px) */
@media (max-width: 768px) {
    .mod-tagssimilar ul,
    ul.tagssimilar,
    .mod-articlesrelated ul {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   7. Style pour le florilege
   ========================================================================== */
/* Grille pour le florilège : cible le conteneur interne quel qu'il soit */
.grille-florilege ul,
.grille-florilege .newsfeed,
.grille-florilege .mod-articlesnews {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* 4 colonnes strictes dès les écrans d'ordinateur / tablettes */
@media (min-width: 768px) {
    .grille-florilege ul,
    .grille-florilege .newsfeed,
    .grille-florilege .mod-articlesnews {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Ajustement des images pour remplir harmonieusement les cases */
.grille-florilege img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px;
}
/* ==========================================================================
   8 : separateur visuel a chaque ligne de category blog
   ========================================================================== */
/* Espacement et ligne sous chaque bloc */
.com-content-category-blog__item {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e5e5e5;
}

/* Sur écran large (3 colonnes), supprime la bordure sur la toute dernière ligne */
@media (min-width: 992px) {
    /* Espace régulier entre les colonnes */
    .com-content-category-blog__items {
        column-gap: 2rem;
    }
}
/* =======================================================
    9 : Mosaïque moderne pour le Florilège complet
   ======================================================= */

/* Active les colonnes type Pinterest */
.page-florilege-mosaique .com-content-category-blog__items {
    column-count: 1;
    column-gap: 1.5rem;
    display: block !important;
}

/* 2 colonnes sur tablette */
@media (min-width: 576px) {
    .page-florilege-mosaique .com-content-category-blog__items {
        column-count: 2;
    }
}

/* 3 colonnes sur écran moyen / portable */
@media (min-width: 992px) {
    .page-florilege-mosaique .com-content-category-blog__items {
        column-count: 3;
    }
}

/* 4 colonnes sur grand écran */
@media (min-width: 1400px) {
    .page-florilege-mosaique .com-content-category-blog__items {
        column-count: 4;
    }
}

/* Carte de chaque dessin */
.page-florilege-mosaique .com-content-category-blog__item {
    break-inside: avoid; /* Évite qu'une image ne soit coupée en deux entre deux colonnes */
    margin-bottom: 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-bottom: none !important; /* Désactive la bordure classique */
    padding-bottom: 0 !important;
}

/* Effet discret de survol sur l'illustration */
.page-florilege-mosaique .com-content-category-blog__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Rendu propre et net de l'image */
.page-florilege-mosaique .com-content-category-blog__item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Masquage des métadonnées inutiles si besoin (dates, auteur) */
.page-florilege-mosaique .article-info {
    display: none;
}

/* =======================================================
   Masonry pour la galerie Simple Image Gallery / AllVideos
   ======================================================= */

.sig-masonry ul,
.sig-masonry .sig-container,
.sig-masonry .sigProContainer {
    column-count: 1;
    column-gap: 1.5rem;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: block !important;
}

/* 2 colonnes sur tablette */
@media (min-width: 576px) {
    .sig-masonry ul,
    .sig-masonry .sig-container,
    .sig-masonry .sigProContainer {
        column-count: 2;
    }
}

/* 3 colonnes sur ordinateur */
@media (min-width: 992px) {
    .sig-masonry ul,
    .sig-masonry .sig-container,
    .sig-masonry .sigProContainer {
        column-count: 3;
    }
}

/* 4 colonnes sur grand écran */
@media (min-width: 1400px) {
    .sig-masonry ul,
    .sig-masonry .sig-container,
    .sig-masonry .sigProContainer {
        column-count: 4;
    }
}

/* Chaque vignette individuelle */
.sig-masonry li,
.sig-masonry .sig-thumb,
.sig-masonry .sigProThumb {
    break-inside: avoid;
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    float: none !important; /* Annule les floats par défaut de l'extension */
}

/* Effet discret au survol */
.sig-masonry li:hover,
.sig-masonry .sig-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Image fluide */
.sig-masonry img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px;
}

/* =======================================================
   Limiter la taille des images dans les résultats de recherche
   ======================================================= */
/* Limiter la taille des images dans les résultats de recherche */
.com-finder .result-image,
.finder-results img,
.search-results img,
.result-item img {
    max-width: 140px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 4px;
    float: left;
    margin: 0 1rem 0.5rem 0;
}

/* Nettoyer le flux après chaque résultat */
.result-item,
.finder-results li {
    clear: both;
}

/* =======================================================
   Limiter la taille des images dans les résultats de recherche
   ======================================================= */

/* Empêcher l'étirement de l'image principale dans la vue article */
.com-content-article .item-image img,
.com-content-article__image img {
    width: auto !important;          /* Ne force plus les 100% de largeur */
    max-width: 100% !important;     /* Reste responsive sur mobile */
    height: auto !important;
    display: block;
    margin: 0 auto 1.5rem auto;     /* Centre l'image proprement avec un espace sous elle */
}

/* Bloquer l'étirement artificiel de toutes les images d'en-tête d'article */
.com-content-article figure img,
.com-content-article .item-image img,
.com-content-article [itemprop="image"] img,
.com-content-article__image img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}
/* Empêcher une image en tête de contenu de s'étirer au-delà de sa vraie taille */
.com-content-article .article-body img,
.com-content-article .com-content-article__body img {
    max-width: 100% !important;
    height: auto !important;
}

/* Si l'image a un width:100% forcé en style en ligne */
.com-content-article img[style*="width: 100%"],
.com-content-article img[style*="width:100%"] {
    width: auto !important;
}

/* =======================================================
   Limiter la taille des images pour l'image d'intro pour la section reportage photo ou video (id 2031)
   ======================================================= */
/* Cibler toutes les archives photos sous le menu 2031 (toutes années confondues) */
body.itemid-2031 .com-content-article .item-image,
body.itemid-2031 .com-content-article figure {
    max-width: 480px !important;    /* Taille contenue pour éviter tout étirement/pixellisation */
    margin: 0 auto 1.5rem auto !important; /* Centrage horizontal */
    text-align: center;
}

body.itemid-2031 .com-content-article .item-image img,
body.itemid-2031 .com-content-article figure img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Petit ombrage propre pour l'habillage */
}

/* =======================================================
   Empêcher le clic sur le segment "tags" dans le fil d'Ariane
   ======================================================= */
/* Empêcher le clic sur le segment "tags" dans le fil d'Ariane */
.breadcrumb-item a[href$="/tags"],
.breadcrumb-item a[href$="/tags/"] {
    pointer-events: none;       /* Rend le lien inerte */
    cursor: default;
    color: inherit;             /* Même couleur que le texte normal */
    text-decoration: none;
}
/* =======================================================
   Afficher une image générique par défaut (Placeholder) via CSS pour la page des tags
   ======================================================= */
/* 1. Harmoniser la hauteur et la structure de toutes les cartes d'articles tagués */
.com-tags-tag .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* 2. Réserver un bloc visuel par défaut quand aucune image n'est présente */
.com-tags-tag .card:not(:has(.item-image)):not(:has(img))::before {
    content: "";
    display: block;
    width: 100%;
    height: 180px; /* Même hauteur moyenne que vos miniatures */
    background-color: #f1f5f9;
    /* Optionnel : motif discret ou logo en filigrane */
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 16px 16px;
}

/* 3. Normaliser le conteneur des vraies images pour que tout s'aligne au millimètre */
.com-tags-tag .item-image,
.com-tags-tag .card-header-image {
    height: 180px;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.com-tags-tag .item-image img,
.com-tags-tag .card-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit élégamment le cadre sans déformation */
}